import Image from "next/image";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useState } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes, FaTrash } from "react-icons/fa";

const ActivityDetails = () => {
    const [expandedIndex, setExpandedIndex] = useState(0); // Initially set the first item as expanded

    const toggleAccordion = (index) => {
        setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
    };

    const activityDetailsValidationSchema = Yup.object().shape({
        activities: Yup.array().of(
            Yup.object().shape({
                category: Yup.string().required("Category is Required"),
                subCategory: Yup.string().required("SubCategory is Required"),
                activityName: Yup.string().required("Activity Name is Required"),
                activityDescription: Yup.string().required("Activity Description is Required"),
                location: Yup.string().required("Location is Required"),
                addressLine1: Yup.string().required("Address is Required"),
                addressLine2: Yup.string().required("Address is Required"),
                pricePerPerson: Yup.string().required("Price Per Person is Required"),
                giftingToSomeone: Yup.string().required("Gifting to someone is Required"),
                place: Yup.string().required("Place is Required"),
                contactPersonForActivity: Yup.string().required("Contact Person Name is Required"),
                minGroupSize: Yup.string().required("Min Group Size is Required"),
                maxGroupSize: Yup.string().required("Max Group Size is Required"),
                months: Yup.string().required("Month is Required"),
                minDuration: Yup.string().required("Min Duration is Required"),
                maxDuration: Yup.string().required("Max Duration is Required"),
                durationUnit: Yup.string().required("Duration Unit is Required"),
                ageGroup: Yup.string().required("Age Group is Required"),
                linkOfBooking: Yup.string().required("Link of Booking is Required"),
                activityImages: Yup.array(),
                contactPersonForBooking: Yup.string(),
                contactNumberForBooking: Yup.string(),
                cancellationPolicyFile: Yup.string(),
                termsConditionsFile: Yup.string(),
            })
        )
    });

    return (
        <Fragment>
            <div className="container p-5">
                <div className="row">
                    <div className="col-12 col-lg-8">
                        <div className="content-div business-details">
                            <div className="form-container">
                                <Formik
                                    initialValues={{
                                        activities: [
                                            {
                                                category: "",
                                                subCategory: "",
                                                activityName: "",
                                                activityDescription: "",
                                                location: "",
                                                addressLine1: "",
                                                addressLine2: "",
                                                pricePerPerson: "",
                                                giftingToSomeone: "",
                                                place: "",
                                                contactPersonForActivity: "",
                                                minGroupSize: "",
                                                maxGroupSize: "",
                                                months: "",
                                                minDuration: "",
                                                maxDuration: "",
                                                durationUnit: "",
                                                ageGroup: "",
                                                linkOfBooking: "",
                                                activityImages: [],
                                                contactPersonForBooking: "",
                                                contactNumberForBooking: "",
                                                cancellationPolicyFile: "",
                                                termsConditionsFile: "",
                                            }
                                        ]
                                    }}
                                    validationSchema={activityDetailsValidationSchema}
                                    // enableReinitialize={true}
                                    onSubmit={values => {
                                        console.log("activity details values", values)
                                    }}
                                >
                                    {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
                                        <Form
                                            onSubmit={e => {
                                                e.preventDefault();
                                                handleSubmit();
                                            }}
                                        >
                                            <FieldArray name="activities">
                                                {({ push, remove }) => (
                                                    <div className="activityDetails">
                                                        <div className="d-flex justify-content-between mb-3">
                                                            <h4 className="mb-0">Activity Details</h4>
                                                            <Button type="button" variant="" className="btnAdd m-0"
                                                                onClick={() => {
                                                                    push({
                                                                        category: "",
                                                                        subCategory: "",
                                                                        activityName: "",
                                                                        activityDescription: "",
                                                                        location: "",
                                                                        addressLine1: "",
                                                                        addressLine2: "",
                                                                        pricePerPerson: "",
                                                                        giftingToSomeone: "",
                                                                        place: "",
                                                                        contactPersonForActivity: "",
                                                                        minGroupSize: "",
                                                                        maxGroupSize: "",
                                                                        months: "",
                                                                        minDuration: "",
                                                                        maxDuration: "",
                                                                        durationUnit: "",
                                                                        ageGroup: "",
                                                                        linkOfBooking: "",
                                                                        activityImages: [],
                                                                        contactPersonForBooking: "",
                                                                        contactNumberForBooking: "",
                                                                        cancellationPolicyFile: "",
                                                                        termsConditionsFile: "",
                                                                    });
                                                                    setExpandedIndex(values.activities.length);
                                                                }}
                                                            >
                                                                <span className="image-container me-2">
                                                                    <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" className="image" />
                                                                </span>
                                                                <span>Add Activity</span>
                                                            </Button>
                                                        </div>
                                                        {values.activities.map((_, index) => (
                                                            <div key={index} className="accordionItem">
                                                                <AccordionItem
                                                                    index={index}
                                                                    expanded={expandedIndex === index}
                                                                    toggleAccordion={() => toggleAccordion(index)}
                                                                    remove={() => remove(index)}
                                                                >
                                                                    <div>
                                                                        <div className="mt-4">
                                                                            {/* <p className="textH">Basic Details</p> */}
                                                                            <div className="d-flex justify-content-between">
                                                                                <p className="textH">Basic Details</p>
                                                                                {index > 0 && (
                                                                                    <div style={{ cursor: "pointer" }} onClick={remove}><FaTrash style={{ marginTop: "-5px" }} /> Remove</div>
                                                                                )}
                                                                            </div>

                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Category</label>
                                                                                        <select
                                                                                            id={`activities.${index}.category`}
                                                                                            name={`activities.${index}.category`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                        >
                                                                                            <option value="">Select</option>
                                                                                            <option value="Category 1">Category 1</option>
                                                                                            <option value="Category 2">Category 2</option>
                                                                                        </select>
                                                                                        <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>SubCategory</label>
                                                                                        <select
                                                                                            id={`activities.${index}.subCategory`}
                                                                                            name={`activities.${index}.subCategory`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                        >
                                                                                            <option value="">Select</option>
                                                                                            <option value="Sub Category 1">Sub Category 1</option>
                                                                                            <option value="Sub Category 2">Sub Category 2</option>
                                                                                        </select>
                                                                                        <ErrorMessage name={`activities.${index}.category`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Activity Name</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.activityName`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].activityName}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.activityName`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Activity Description</label>
                                                                                        <textarea
                                                                                            rows="4"
                                                                                            name={`activities.${index}.activityDescription`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].activityDescription}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.activityDescription`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Location</label>
                                                                                        <select
                                                                                            id={`activities.${index}.location`}
                                                                                            name={`activities.${index}.location`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                        >
                                                                                            <option value="">Select</option>
                                                                                            <option value="Location 1">Location 1</option>
                                                                                            <option value="Location 2">Location 2</option>
                                                                                        </select>
                                                                                        <ErrorMessage name={`activities.${index}.location`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Price (per person)</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.pricePerPerson`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].pricePerPerson}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.pricePerPerson`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Address Line 1</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.addressLine1`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].addressLine1}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.addressLine1`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Address Line 2</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.addressLine2`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].addressLine2}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.addressLine2`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group mb-2">
                                                                                        <label>Gifting to Someone</label>
                                                                                        <div className="row">
                                                                                            <div className="col-6 col-lg-6">
                                                                                                <label className="radioContainer" htmlFor={`gifting_allowed.${index}`}>
                                                                                                    <input
                                                                                                        type="radio"
                                                                                                        id={`gifting_allowed.${index}`}
                                                                                                        name={`activities.${index}.giftingToSomeone`}
                                                                                                        onChange={handleChange}
                                                                                                        onBlur={handleBlur}
                                                                                                    /> Allowed
                                                                                                    <span className="checkmark"></span>
                                                                                                </label>
                                                                                            </div>
                                                                                            <div className="col-6 col-lg-6">
                                                                                                <label className="radioContainer" htmlFor={`gifting_disallowed.${index}`}>
                                                                                                    <input
                                                                                                        type="radio"
                                                                                                        id={`gifting_disallowed.${index}`}
                                                                                                        name={`activities.${index}.giftingToSomeone`}
                                                                                                        onChange={handleChange}
                                                                                                        onBlur={handleBlur}
                                                                                                    /> Disallowed
                                                                                                    <span className="checkmark"></span>
                                                                                                </label>
                                                                                            </div>
                                                                                        </div>
                                                                                        <ErrorMessage name={`activities.${index}.giftingToSomeone`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group mb-2">
                                                                                        <label>Place</label>
                                                                                        <div className="row">
                                                                                            <div className="col-4 col-lg-4">
                                                                                                <label className="radioContainer" htmlFor={`indoor.${index}`}>
                                                                                                    <input
                                                                                                        type="radio"
                                                                                                        id={`indoor.${index}`}
                                                                                                        name={`activities.${index}.place`}
                                                                                                        onChange={handleChange}
                                                                                                        onBlur={handleBlur}
                                                                                                    /> Indoor
                                                                                                    <span className="checkmark"></span>
                                                                                                </label>
                                                                                            </div>
                                                                                            <div className="col-5 col-lg-5">
                                                                                                <label className="radioContainer" htmlFor={`outdoor.${index}`}>
                                                                                                    <input
                                                                                                        type="radio"
                                                                                                        id={`outdoor.${index}`}
                                                                                                        name={`activities.${index}.place`}
                                                                                                        onChange={handleChange}
                                                                                                        onBlur={handleBlur}
                                                                                                    /> Outdoor
                                                                                                    <span className="checkmark"></span>
                                                                                                </label>
                                                                                            </div>
                                                                                            <div className="col-3 col-lg-3">
                                                                                                <label className="radioContainer" htmlFor={`both.${index}`}>
                                                                                                    <input
                                                                                                        type="radio"
                                                                                                        id={`both.${index}`}
                                                                                                        name={`activities.${index}.place`}
                                                                                                        onChange={handleChange}
                                                                                                        onBlur={handleBlur}
                                                                                                    /> Both
                                                                                                    <span className="checkmark"></span>
                                                                                                </label>
                                                                                            </div>
                                                                                        </div>
                                                                                        <ErrorMessage name={`activities.${index}.place`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <hr />
                                                                        <div className="mt-4">
                                                                            <p className="textH">Group Information</p>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Contact Person for the Activity</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.contactPersonForActivity`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].contactPersonForActivity}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.contactPersonForActivity`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Size of the Group</label>
                                                                                        <div className="row">
                                                                                            <div className="col-6 col-lg-5">
                                                                                                <input
                                                                                                    type="text"
                                                                                                    placeholder="Min."
                                                                                                    name={`activities.${index}.minGroupSize`}
                                                                                                    onChange={handleChange}
                                                                                                    onBlur={handleBlur}
                                                                                                    value={values.activities[index].minGroupSize}
                                                                                                />
                                                                                                <ErrorMessage name={`activities.${index}.minGroupSize`} component="div" className="form-error" />
                                                                                            </div>
                                                                                            <div className="col-6 col-lg-5">
                                                                                                <input
                                                                                                    type="text"
                                                                                                    placeholder="Max."
                                                                                                    name={`activities.${index}.maxGroupSize`}
                                                                                                    onChange={handleChange}
                                                                                                    onBlur={handleBlur}
                                                                                                    value={values.activities[index].maxGroupSize}
                                                                                                />
                                                                                                <ErrorMessage name={`activities.${index}.maxGroupSize`} component="div" className="form-error" />
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <hr />
                                                                        <div className="mt-4">
                                                                            <p className="textH">Availability</p>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Months</label>
                                                                                        <select
                                                                                            id={`activities.${index}.months`}
                                                                                            name={`activities.${index}.months`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                        >
                                                                                            <option value="">Select</option>
                                                                                            <option value="Location 1">Location 1</option>
                                                                                            <option value="Location 2">Location 2</option>
                                                                                        </select>
                                                                                        <ErrorMessage name={`activities.${index}.months`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Day & Time</label>
                                                                                        <select
                                                                                            id={`activities.${index}.dayTime`}
                                                                                            name={`activities.${index}.dayTime`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                        >
                                                                                            <option value="">Select</option>
                                                                                            <option value="Location 1">Location 1</option>
                                                                                            <option value="Location 2">Location 2</option>
                                                                                        </select>
                                                                                        <ErrorMessage name={`activities.${index}.dayTime`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Duration</label>
                                                                                        <div className="row">
                                                                                            <div className="col-5 col-lg-4">
                                                                                                <select
                                                                                                    id="minDuration"
                                                                                                    name="minDuration"
                                                                                                    onChange={handleChange}
                                                                                                    onBlur={handleBlur}
                                                                                                >
                                                                                                    <option value="">Min</option>
                                                                                                </select>
                                                                                                {errors.minDuration && touched.minDuration && (<span className="form-error">{errors.minDuration}</span>)}
                                                                                            </div>
                                                                                            <div className="col-5 col-lg-4">
                                                                                                <select
                                                                                                    id="maxDuration"
                                                                                                    name="maxDuration"
                                                                                                    onChange={handleChange}
                                                                                                    onBlur={handleBlur}
                                                                                                    style={{ width: "100%" }}
                                                                                                >
                                                                                                    <option value="">Max</option>
                                                                                                </select>
                                                                                                {errors.maxDuration && touched.maxDuration && (<span className="form-error">{errors.maxDuration}</span>)}
                                                                                            </div>
                                                                                            <div className="col-2 col-lg-4">
                                                                                                <select
                                                                                                    id="durationUnit"
                                                                                                    name="durationUnit"
                                                                                                    onChange={handleChange}
                                                                                                    onBlur={handleBlur}
                                                                                                >
                                                                                                    <option value="Hrs">Hrs</option>
                                                                                                    <option value="Mins">Mins</option>
                                                                                                </select>
                                                                                                {errors.durationUnit && touched.durationUnit && (<span className="form-error">{errors.durationUnit}</span>)}
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <hr />
                                                                        <div className="mt-4">
                                                                            <p className="textH">Booking & Activity Information</p>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Link of Booking</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.linkOfBooking`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].linkOfBooking}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.linkOfBooking`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Contact Person Name</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.contactPersonForBooking`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].contactPersonForBooking}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.contactPersonForBooking`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Contact Person Number</label>
                                                                                        <input
                                                                                            type="text"
                                                                                            name={`activities.${index}.contactNumberForBooking`}
                                                                                            onChange={handleChange}
                                                                                            onBlur={handleBlur}
                                                                                            value={values.activities[index].contactNumberForBooking}
                                                                                        />
                                                                                        <ErrorMessage name={`activities.${index}.contactNumberForBooking`} component="div" className="form-error" />
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <hr />
                                                                        <div className="mt-4">
                                                                            <p className="textH">Policy & Terms</p>
                                                                            <div className="row">
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Cancellation Policy</label>
                                                                                        <div className="custom-file">
                                                                                            <input
                                                                                                type="file"
                                                                                                className="custom-file-input"
                                                                                                id={`activities.${index}.cancellationPolicyFile`}
                                                                                                name={`activities.${index}.cancellationPolicyFile`}
                                                                                                onChange={(event) => {
                                                                                                    if (event) {
                                                                                                        const file = event.currentTarget.files[0]
                                                                                                        setFieldValue(`activities.${index}.cancellationPolicyFile`, file)
                                                                                                    }
                                                                                                }}
                                                                                                onBlur={handleBlur}
                                                                                                onClick={event => {
                                                                                                    const { target = {} } = event || {};
                                                                                                    target.value = "";
                                                                                                }}
                                                                                            />
                                                                                            <label className="custom-file-label" htmlFor={`activities.${index}.cancellationPolicyFile`}>
                                                                                                Upload
                                                                                            </label>
                                                                                        </div>
                                                                                        <ErrorMessage name={`activities.${index}.cancellationPolicyFile`} component="div" className="form-error" />
                                                                                        {values.activities[index].cancellationPolicyFile && (
                                                                                            <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
                                                                                                <p className="textS m-0">{values.activities[index].cancellationPolicyFile.name}</p>
                                                                                                <FaTimes style={{ cursor: "pointer" }} onClick={() => {
                                                                                                    setFieldValue(`activities.${index}.cancellationPolicyFile`, "")
                                                                                                }} />
                                                                                            </div>
                                                                                        )}
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-12 col-lg-6">
                                                                                    <div className="input-group">
                                                                                        <label>Terms & Conditions</label>
                                                                                        <div className="custom-file">
                                                                                            <input
                                                                                                type="file"
                                                                                                className="custom-file-input"
                                                                                                id={`activities.${index}.termsConditionsFile`}
                                                                                                name={`activities.${index}.termsConditionsFile`}
                                                                                                onChange={(event) => {
                                                                                                    if (event) {
                                                                                                        const file = event.currentTarget.files[0]
                                                                                                        setFieldValue(`activities.${index}.termsConditionsFile`, file)
                                                                                                    }
                                                                                                }}
                                                                                                onBlur={handleBlur}
                                                                                                onClick={event => {
                                                                                                    const { target = {} } = event || {};
                                                                                                    target.value = "";
                                                                                                }}
                                                                                            />
                                                                                            <label className="custom-file-label" htmlFor={`activities.${index}.termsConditionsFile`}>
                                                                                                Upload
                                                                                            </label>
                                                                                        </div>
                                                                                        <ErrorMessage name={`activities.${index}.termsConditionsFile`} component="div" className="form-error" />
                                                                                        {values.activities[index].termsConditionsFile && (
                                                                                            <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
                                                                                                <p className="textS m-0">{values.activities[index].termsConditionsFile.name}</p>
                                                                                                <FaTimes style={{ cursor: "pointer" }} onClick={() => {
                                                                                                    setFieldValue(`activities.${index}.termsConditionsFile`, "")
                                                                                                }} />
                                                                                            </div>
                                                                                        )}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </AccordionItem>
                                                            </div>
                                                        ))}
                                                    </div>
                                                )}
                                            </FieldArray>

                                            <div className="row">
                                                <div className="col-12 col-lg-5">
                                                    <div className="input-group">
                                                        <Button type="submit" className="btn btn-primary btn-submit" disabled>
                                                            Submit
                                                        </Button>
                                                    </div>
                                                </div>
                                            </div>
                                        </Form>
                                    )}
                                </Formik>
                            </div>
                        </div>
                    </div>
                    <div className="col-12 col-lg-4">
                        <div className="content-div help-center">
                            <h2>Help Center</h2>
                            <ul className="helplist">
                                <li>
                                    <img src="/images/vendor/question.svg" className="img-fluid" />
                                    <p>Lorem Ipsum Dolor Sit?</p>
                                </li>
                                <li>
                                    <img src="/images/vendor/question.svg" className="img-fluid" />
                                    <p>Lorem Ipsum Dolor Sit?</p>
                                </li>
                                <li>
                                    <img src="/images/vendor/question.svg" className="img-fluid" />
                                    <p>Lorem Ipsum Dolor Sit?</p>
                                </li>
                                <li>
                                    <img src="/images/vendor/question.svg" className="img-fluid" />
                                    <p>Lorem Ipsum Dolor Sit?</p>
                                </li>
                                <li>
                                    <img src="/images/vendor/call.svg" className="img-fluid" />
                                    <p>+1 (407) 8798 789</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}

const AccordionItem = ({ index, expanded, toggleAccordion, remove, children }) => {
    return (
        <div>
            <div className="d-flex align-items-center justify-content-between" onClick={toggleAccordion} style={{ cursor: "pointer" }}>
                <p className="textH mb-0">Activity Name {index + 1}</p>
                <div>
                    {expanded ? <Image alt="" width="24" height="24" src="/images/vendor/minus.svg" /> : <Image alt="" width="24" height="24" src="/images/vendor/plus.svg" />}
                </div>
            </div>

            <div style={{ display: expanded ? 'block' : 'none' }}>{children}</div>
        </div>
    );
};

export default ActivityDetails;