import Image from "next/image";
import { ErrorMessage, FieldArray, Formik } from "formik";
import { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form, Modal } from "react-bootstrap";
import * as Yup from "yup";
import { FaTimes } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { getAllSubCategories } from "../../redux/actions/categoriesAction";
import { getLoggedInVendor, pincodeSearchByFilter } from "../../redux/actions/vendorActions";
import { AsyncTypeahead } from "react-bootstrap-typeahead";
import Select from "react-select";
import makeAnimated from "react-select/animated";
import { Select as AntSelect, Switch, Upload, Image as AntImage, message } from "antd";
// import { Image as AntSelect, Switch, Upload } from "antd";
// import { getMasterDays } from "../../redux/actions/activityAction";
import axios from "axios";
import { sanitizeTimeFormat, sanitizeTimeRange } from "../../services/imageHandling";
import { createActivity, getActivityById, updateActivityById } from "../../redux/actions/activityAction";
import { toast } from "react-toastify";
import { DatePicker, Space } from "antd";
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import LazyLoad from "react-lazyload";
import { ArrowLeftOutlined, CheckCircleTwoTone, PlusOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import ImageUploadPopUp from "./ImageUploadPopUp";
import { loadUser } from "../../redux/actions/userActions";
import UploadImageComponent from "./UploadImageComponent";
dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const getBase64 = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

const format = "HH:mm";
let timeArray = [];

const hoursArray = [
  { value: "01", label: "01" },
  { value: "02", label: "02" },
  { value: "03", label: "03" },
  { value: "04", label: "04" },
  { value: "05", label: "05" },
  { value: "06", label: "06" },
  { value: "07", label: "07" },
  { value: "08", label: "08" },
  { value: "09", label: "09" },
  { value: "10", label: "10" },
  { value: "11", label: "11" },
  { value: "12", label: "12" }
];
const minutesArray = [
  { value: "00", label: "00" },
  { value: "01", label: "01" },
  { value: "02", label: "02" },
  { value: "03", label: "03" },
  { value: "04", label: "04" },
  { value: "05", label: "05" },
  { value: "06", label: "06" },
  { value: "07", label: "07" },
  { value: "08", label: "08" },
  { value: "09", label: "09" },
  { value: "10", label: "10" },
  { value: "11", label: "11" },
  { value: "12", label: "12" },
  { value: "13", label: "13" },
  { value: "14", label: "14" },
  { value: "15", label: "15" },
  { value: "16", label: "16" },
  { value: "17", label: "17" },
  { value: "18", label: "18" },
  { value: "19", label: "19" },
  { value: "20", label: "20" },
  { value: "21", label: "21" },
  { value: "22", label: "22" },
  { value: "23", label: "23" },
  { value: "24", label: "24" },
  { value: "25", label: "25" },
  { value: "26", label: "26" },
  { value: "27", label: "27" },
  { value: "28", label: "28" },
  { value: "29", label: "29" },
  { value: "30", label: "30" },
  { value: "31", label: "31" },
  { value: "32", label: "32" },
  { value: "33", label: "33" },
  { value: "34", label: "34" },
  { value: "35", label: "35" },
  { value: "36", label: "36" },
  { value: "37", label: "37" },
  { value: "38", label: "38" },
  { value: "39", label: "39" },
  { value: "40", label: "40" },
  { value: "41", label: "41" },
  { value: "42", label: "42" },
  { value: "43", label: "43" },
  { value: "44", label: "44" },
  { value: "45", label: "45" },
  { value: "46", label: "46" },
  { value: "47", label: "47" },
  { value: "48", label: "48" },
  { value: "49", label: "49" },
  { value: "50", label: "50" },
  { value: "51", label: "51" },
  { value: "52", label: "52" },
  { value: "53", label: "53" },
  { value: "54", label: "54" },
  { value: "55", label: "55" },
  { value: "56", label: "56" },
  { value: "57", label: "57" },
  { value: "58", label: "58" },
  { value: "59", label: "59" }
];
const monthsArray = [
  { value: "january", label: "January" },
  { value: "february", label: "February" },
  { value: "march", label: "March" },
  { value: "april", label: "April" },
  { value: "may", label: "May" },
  { value: "june", label: "June" },
  { value: "july", label: "July" },
  { value: "august", label: "August" },
  { value: "september", label: "September" },
  { value: "october", label: "October" },
  { value: "november", label: "November" },
  { value: "december", label: "December" }
];

// import { colourOptions } from '../data';
const animatedComponents = makeAnimated();
const ActivityDetails = ({ isUpdate }) => {
  // const [fileList, setFileList] = useState([]);
  // const [uploading, setUploading] = useState(false);
  const [showImageUploadModal, setshowImageUploadModal] = useState(false);
  const [imagesArrayComponent, setimagesArrayComponent] = useState([]);

  useEffect(() => {
    // dispatch(loadUser());
    // setFileList([
    //   // {
    //   //   uid: "-1",
    //   //   name: "image.png",
    //   //   status: "done",
    //   //   url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    //   // },
    //   // {
    //   //   uid: "-2",
    //   //   name: "image.png",
    //   //   status: "done",
    //   //   url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    //   // },
    //   // {
    //   //   uid: "-3",
    //   //   name: "image.png",
    //   //   status: "done",
    //   //   url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    //   // },
    //   // {
    //   //   uid: "-4",
    //   //   name: "image.png",
    //   //   status: "done",
    //   //   url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    //   // },
    //   // {
    //   //   uid: "-xxx",
    //   //   percent: 50,
    //   //   name: "image.png",
    //   //   status: "uploading",
    //   //   url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    //   // },
    //   // {
    //   //   uid: "-5",
    //   //   name: "image.png",
    //   //   status: "error"
    //   // }
    // ]);
  }, []);

  const ActivityApprovalStatus = ({ status }) => {
    if (status) {
      switch (status) {
        case "approved":
          return (
            <>
              <div className=" ">
                <div className="alert alert-success alert-dismissible fade show text-center" role="alert">
                  <div className="text-center">
                    <span>
                      <p className=" text-center">
                        Activity approved! <CheckCircleTwoTone twoToneColor="#00b33c" />
                      </p>
                    </span>
                    <p className=" text-center">If you make changes, the details will be sent again for approval.</p>
                  </div>
                </div>
              </div>
            </>
          );

        case "rejected":
          return (
            <>
              <div className="col-12 offset-lg-2 col-lg-8 ">
                <div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
                  <div className="text-center">
                    <p className="p1 text-center">Your profile has been rejected!</p>
                    <p className="p2 text-center"> Please contact the admin for more details!</p>
                  </div>
                </div>
              </div>
            </>
          );

        case "pending":
          return (
            <>
              <div className="col-12 offset-lg-2 col-lg-8 ">
                <div className="alert alert-warning alert-dismissible fade show text-center" role="alert">
                  <div className="text-center">
                    <p className="p1 text-center">Your profile has been sent for approval!</p>
                    <p className="p2 text-center"> Please wait till the vendor takes action!</p>
                  </div>
                </div>
              </div>
            </>
          );

        default:
          break;
      }
    }
  };
  const dispatch = useDispatch();
  const { categories } = useSelector(state => state.categories);
  const { subCategories } = useSelector(state => state.subCategories);
  const { loggedInVendor } = useSelector(state => state.loggedInVendor);
  const { activityById } = useSelector(state => state.activityById);

  console.log("activityById", activityById);
  // console.log("tostring",activityById?.data.attributes.duration.toString())
  const currentDate = new Date();
  const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } });
  console.log("subCategories", subCategories);
  const router = useRouter();
  let categoryRef = useRef();
  let timeLines;
  const activityDetailsValidationSchema = Yup.object().shape({
    category: Yup.string().required("Category is Required"),
    subCategory: Yup.string().required("Sub Category is Required"),
    activityName: Yup.string().required("Activity Name is Required"),
    activityDescription: Yup.string().required("Activity Description is Required"),
    location: Yup.string(),
    addressLine1: Yup.string().required("Address is Required"),
    addressLine2: Yup.string(),
    pricePerPerson: Yup.string().required("Price Per Person is Required"),
    giftingToSomeone: Yup.string().required("Required field"),
    place: Yup.string(),
    activityType: Yup.string().required("Required field"),
    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.array(),
    minDuration: Yup.string().required("Min Duration is Required"),
    maxDuration: Yup.string().required("Max Duration is Required"),
    durationUnit: Yup.string().required("This is a required field"),
    ageGroup: Yup.string().required("Age Group is Required"),
    linkOfBooking: Yup.string().required("Link of Booking is Required"),
    activityImages: Yup.array(),
    contactPersonForBooking: Yup.string().required("Contact person is a required field"),
    countryCode: Yup.string(),
    contactNumberForBooking: Yup.string().required("Number is a required field"),
    cancellationPolicyFile: Yup.string(),
    termsConditionsFile: Yup.string(),
    activityPeriod: Yup.array().required("Please mention both dates!")
    // availableOnMonday: Yup.bool()
  });
  const [pincodeData, setPinCodeData] = useState();
  const [activeDays, setActiveDays] = useState();
  // const [minDisabled, setMinDisabled] = useState(true);
  // const [months, setMonths] = useState(true);
  const [masterDays, setMasterDays] = useState();
  // const [timeSlotError, setTimeSlotError] = useState();
  const [activityPeriodState, setActivityPeriodState] = useState([]);
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();
  const [daysBoolean, setDaysBoolean] = useState({
    availableOnMonday: false,
    availableOnTuesday: false,
    availableOnWednesday: false,
    availableOnThursday: false,
    availableOnFriday: false,
    availableOnSaturday: false,
    availableOnSunday: false
  });
  // const [timeArray, setTimeArray] = useState([]);
  console.log("loggedInVendor", loggedInVendor);
  // const [timeLines, setTimeLines] = useState()
  const ref = useRef(null);
  // let
  const handleSearch = async pin => {
    if (isNaN(pin)) {
      return;
    }
    let pincodeDataSet = await pincodeSearchByFilter(pin);
    // console.log("pincodeData", pincodeDataSet.data.data);
    setPinCodeData(pincodeDataSet.data.data);
  };

  useEffect(() => {
    dispatch(getLoggedInVendor());
  }, []);
  useEffect(() => {
    if (isUpdate) {
      ref.current.state.selected = [{ id: activityById?.data.attributes?.masterPincode.data.id, name: activityById?.data.attributes?.masterPincode.data.attributes.name }];
      setDaysBoolean({
        availableOnSunday: activityById?.data.attributes.availableOnSunday ? activityById?.data.attributes.availableOnSunday : "",
        availableOnMonday: activityById?.data.attributes.availableOnMonday ? activityById?.data.attributes.availableOnMonday : "",
        availableOnTuesday: activityById?.data.attributes.availableOnTuesday ? activityById?.data.attributes.availableOnTuesday : "",
        availableOnWednesday: activityById?.data.attributes.availableOnWednesday ? activityById?.data.attributes.availableOnWednesday : "",
        availableOnThursday: activityById?.data.attributes.availableOnThursday ? activityById?.data.attributes.availableOnThursday : "",
        availableOnFriday: activityById?.data.attributes.availableOnFriday ? activityById?.data.attributes.availableOnFriday : "",
        availableOnSaturday: activityById?.data.attributes.availableOnSaturday ? activityById?.data.attributes.availableOnSaturday : ""
      });
      setStartDate(activityById?.data.attributes.fromDate);
      setEndDate(activityById?.data.attributes.toDate);
      setimagesArrayComponent(activityById?.data.attributes.imagesComponent.map(item => item.image.data?.id));
    }
  }, []);
  // useEffect(() => {
  //   dispatch(updateActivityById(8))
  // }, [])

  console.log("activityById", activityById);
  console.log("activityPeriodState", activityPeriodState);
  return (
    <Fragment>
      <div className="container p-1">
        <div className="row">
          <div className="col-12 col-lg-8">
            <div className="content-div business-details">
              {isUpdate ? <h2>{activityById?.data.attributes.name}</h2> : <div>Add Details</div>}
              {isUpdate && <ActivityApprovalStatus status={activityById?.data.attributes.approved} />}
              <div className="form-container">
                <Formik
                  enableReinitialize
                  initialValues={{
                    category: activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
                      ? activityById?.data.attributes?.subCategory?.data?.attributes?.category?.data?.attributes?.name
                      : "",
                    subCategory: activityById?.data.attributes?.subCategory?.data?.attributes.name ? activityById?.data.attributes?.subCategory?.data?.attributes.name : "",
                    activityName: activityById?.data.attributes.name ? activityById?.data.attributes.name : "",
                    activityDescription: activityById?.data.attributes?.description ? activityById?.data.attributes?.description : "",
                    location: "",
                    addressLine1: activityById?.data.attributes.address ? activityById?.data.attributes.address : "",
                    addressLine2: "",
                    pricePerPerson: activityById?.data.attributes.pricePerPerson ? activityById?.data.attributes.pricePerPerson : "",
                    giftingToSomeone: activityById?.data.attributes.giftSomeone ? activityById?.data.attributes.giftSomeone : "",
                    place: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
                    contactPersonForActivity: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : "",
                    minGroupSize: activityById?.data.attributes.minGroupSize ? activityById?.data.attributes.minGroupSize : "",
                    maxGroupSize: activityById?.data.attributes.maxGroupSize ? activityById?.data.attributes.maxGroupSize : "",
                    months: [],
                    minDuration: activityById?.data.attributes.minimumDuration ? activityById?.data.attributes.minimumDuration.toString() : "",
                    maxDuration: activityById?.data.attributes.maximumDuration ? activityById?.data.attributes.maximumDuration.toString() : "",
                    durationUnit: activityById?.data.attributes.duration ? activityById?.data.attributes.duration.toString() : "",
                    ageGroup: activityById?.data.attributes.ageLowerLimit ? activityById?.data.attributes.ageLowerLimit.toString() : "",
                    linkOfBooking: activityById?.data.attributes.link ? activityById?.data.attributes.link : "",
                    activityImages: [],
                    contactPersonForBooking: activityById?.data.attributes.contactPersonForBooking ? activityById?.data.attributes.contactPersonForBooking : "",
                    countryCode: "",
                    contactNumberForBooking: activityById?.data.attributes.phoneNumber ? activityById?.data.attributes.phoneNumber : "",
                    cancellationPolicyFile: "",
                    termsConditionsFile: "",
                    activityPeriod: [],
                    activityType: activityById?.data.attributes.activityType ? activityById?.data.attributes.activityType : ""
                  }}
                  validationSchema={activityDetailsValidationSchema}
                  // enableReinitialize={true}
                  onSubmit={values => {}}
                >
                  {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
                    <Form
                      onSubmit={async e => {
                        e.preventDefault();
                        console.log("activity details values", values);
                        if (
                          !(
                            daysBoolean.availableOnMonday ||
                            daysBoolean.availableOnTuesday ||
                            daysBoolean.availableOnWednesday ||
                            daysBoolean.availableOnThursday ||
                            daysBoolean.availableOnFriday ||
                            daysBoolean.availableOnSaturday ||
                            daysBoolean.availableOnSunday
                          )
                        ) {
                          toast.error("Please select days you will be active on");
                          return;
                        }
                        let fromDate;
                        let toDate;
                        console.log("timeslots", activityPeriodState, startDate, endDate);
                        if (!startDate || !endDate) {
                          fromDate = sanitizeTimeRange({ data: activityPeriodState[0] });
                          toDate = sanitizeTimeRange({ data: activityPeriodState[1] });
                          if (!activityPeriodState || !activityPeriodState.length > 0) {
                            toast.error("Please select time range");
                            return;
                          }
                        } else if (startDate && endDate) {
                          fromDate = startDate;
                          toDate = endDate;
                        }

                        if (imagesArrayComponent.length < 5) {
                          toast.error("You need to upload 5 images!");
                          return;
                        }

                        handleSubmit();
                        values = {
                          ...values,
                          // timeSlots,
                          // months,
                          pincode: ref.current.state.selected[0],
                          vendor: loggedInVendor,
                          name: values.activityName,
                          description: values.activityDescription,
                          address: `${values.addressLine1}, ${values.addressLine2}`,
                          minimumDuration: values.minDuration,
                          maximumDuration: values.maxDuration,
                          ageLowerLimit: values.ageGroup,
                          phoneNumber: values.contactNumberForBooking,
                          link: values.linkOfBooking,
                          giftSomeone: values.giftingToSomeone,
                          fromDate,
                          toDate,
                          daysBoolean,
                          contactPersonForActivity: values.contactPersonForActivity,
                          duration: values.durationUnit.toString(),
                          imagesComponent: imagesArrayComponent,
                          approved: "pending"
                        };
                        if (!ref.current.state.selected[0]) {
                          toast.error("Please select location!");
                        }
                        console.log("values 123", values);
                        if (isUpdate) {
                          console.log("router", router);
                          const updateRes = await dispatch(updateActivityById({ activityId: router.query.id, updatedData: values }));
                          console.log("updateRes", updateRes);
                          toast.success("Activity sent for approval.");
                        }
                        if (!isUpdate) {
                          const res = await dispatch(createActivity(values));
                          console.log("res", res);
                          if (res.success) {
                            toast.success("Activity added successfully!");
                            resetForm();
                            setActiveDays([]);
                            // setMonths([]);
                          }
                        }
                        dispatch(getActivityById(router.query.id));
                      }}
                    >
                      <div className="activityDetails">
                        <div>
                          <div className="mt-4">
                            <div className="d-flex justify-content-between">
                              <p className="textH">Basic Details</p>
                            </div>

                            <div className="row">
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Category</label>
                                  <select
                                    ref={categoryRef}
                                    value={values.category}
                                    name="category"
                                    onChange={async e => {
                                      handleChange(e);
                                      console.log(categoryRef);
                                      // console.log("subCategories", categoryRef.current.value);
                                      await dispatch(getAllSubCategories(categoryRef.current.value));
                                      setFieldValue("subCategory", "");
                                    }}
                                    onBlur={handleBlur}
                                  >
                                    <option value="">Select</option>
                                    {categories &&
                                      categories?.data.length > 0 &&
                                      categories.data.map((item, index) => {
                                        return (
                                          <option key={index} value={item.attributes.name}>
                                            {item.attributes.name}
                                          </option>
                                        );
                                      })}
                                  </select>
                                  {touched.category && errors.category && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.category}
                                    </span>
                                  )}
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Sub Category</label>
                                  <select id={`subCategory`} value={values.subCategory} name={`subCategory`} onChange={handleChange} onBlur={handleBlur}>
                                    <option value="">Select</option>
                                    {subCategories &&
                                      subCategories?.data.length > 0 &&
                                      subCategories.data.map((item, index) => {
                                        return (
                                          <option key={index} value={item.value}>
                                            {item.attributes.name}
                                          </option>
                                        );
                                      })}
                                  </select>
                                  {touched.subCategory && errors.subCategory && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.subCategory}
                                    </span>
                                  )}
                                </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={`activityName`} onChange={handleChange} onBlur={handleBlur} value={values.activityName} />
                                  {touched.activityName && errors.activityName && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.activityName}
                                    </span>
                                  )}
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Activity Description</label>
                                  <textarea rows="4" name={`activityDescription`} onChange={handleChange} onBlur={handleBlur} value={values.activityDescription} />
                                  {touched.activityDescription && errors.activityDescription && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.activityDescription}
                                    </span>
                                  )}
                                </div>
                              </div>
                            </div>
                            <div className="row">
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Location</label>
                                  <AsyncTypeahead
                                    type="number"
                                    onSearch={handleSearch}
                                    minLength={3}
                                    value={values.location}
                                    id="basic-behaviors-example"
                                    labelKey="name"
                                    options={
                                      pincodeData &&
                                      pincodeData.length > 0 &&
                                      pincodeData.map(item => {
                                        return { name: item.attributes.name, id: item.id };
                                      })
                                    }
                                    placeholder="Choose a pincode"
                                    ref={ref}
                                    onBlur={() => {
                                      console.log(ref.current);
                                      if (!ref.current.state.selected.length > 0) {
                                        ref.current?.clear();
                                      }
                                    }}
                                    onChange={e => {
                                      console.log("input change", e);
                                      // handleChange(e);
                                    }}
                                  />
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Price (per person)</label>
                                  <input type="text" name={`pricePerPerson`} onChange={handleChange} onBlur={handleBlur} value={values.pricePerPerson} />
                                  {touched.pricePerPerson && errors.pricePerPerson && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.pricePerPerson}
                                    </span>
                                  )}
                                </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={`addressLine1`} onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
                                  {touched.addressLine1 && errors.addressLine1 && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.addressLine1}
                                    </span>
                                  )}
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Address Line 2</label>
                                  <input type="text" name={`addressLine2`} onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
                                </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-12 col-lg-12">
                                      <select id="giftingToSomeone" name="giftingToSomeone" value={values.giftingToSomeone} onChange={handleChange} onBlur={handleBlur}>
                                        {" "}
                                        Gift someone
                                        <option value="">Select</option>
                                        <option value={true}>Yes</option>
                                        <option value={false}>No</option>
                                      </select>
                                    </div>
                                    {touched.giftingToSomeone && errors.giftingToSomeone && (
                                      <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                        {errors.giftingToSomeone}
                                      </span>
                                    )}
                                  </div>
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group mb-2">
                                  <label>Activity Type</label>
                                  <div className="row">
                                    <div className="">
                                      <div className="col-12 col-lg-12">
                                        <select id="activityType" name="activityType" onChange={handleChange} onBlur={handleBlur} value={values.activityType}>
                                          {" "}
                                          Activity Type
                                          <option value="">Select</option>
                                          <option value={"indoor"}>Indoor</option>
                                          <option value={"outdoor"}>Outdoor</option>
                                        </select>
                                      </div>
                                      {touched.activityType && errors.activityType && (
                                        <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                          {errors.activityType}
                                        </span>
                                      )}
                                    </div>
                                  </div>
                                </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={`contactPersonForActivity`} onChange={handleChange} onBlur={handleBlur} value={values.contactPersonForActivity} />
                                  {touched.contactPersonForActivity && errors.contactPersonForActivity && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.contactPersonForActivity}
                                    </span>
                                  )}
                                </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={`minGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.minGroupSize} />
                                      {touched.minGroupSize && errors.minGroupSize && (
                                        <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                          {errors.minGroupSize}
                                        </span>
                                      )}
                                    </div>
                                    <div className="col-6 col-lg-5">
                                      <input type="text" placeholder="Max." name={`maxGroupSize`} onChange={handleChange} onBlur={handleBlur} value={values.maxGroupSize} />
                                      {touched.maxGroupSize && errors.maxGroupSize && (
                                        <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                          {errors.maxGroupSize}
                                        </span>
                                      )}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <hr />
                          <div className="mt-4">
                            <p className="textH">Availability</p>
                            <div className="row">
                              <div className="col-md-12 ">
                                <div className="input-group">
                                  <span className="col-md-12 my-1">Start date and end date of the activity:</span>
                                  <LazyLoad>
                                    {isUpdate ? (
                                      <RangePicker
                                        id="activityPeriod"
                                        name="activityPeriod"
                                        defaultValue={[
                                          dayjs(activityById?.data.attributes.fromDate ? activityById?.data.attributes.fromDate : sanitizedCurrentDate, dateFormat),
                                          dayjs(activityById?.data.attributes.toDate ? activityById?.data.attributes.toDate : sanitizedCurrentDate, dateFormat)
                                        ]}
                                        format={dateFormat}
                                        onBlur={() => {
                                          if (true) {
                                          }
                                        }}
                                        onChange={e => {
                                          console.log("change", e);
                                          setActivityPeriodState(e);
                                          // handleChange(e);
                                        }}
                                      />
                                    ) : (
                                      <RangePicker
                                        id="activityPeriod"
                                        name="activityPeriod"
                                        format={dateFormat}
                                        onBlur={() => {
                                          if (true) {
                                          }
                                        }}
                                        onChange={e => {
                                          console.log("change", e);
                                          setActivityPeriodState(e);
                                          // handleChange(e);
                                        }}
                                      />
                                    )}
                                  </LazyLoad>
                                  {touched.activityPeriod && errors.activityPeriod && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.activityPeriod}
                                    </span>
                                  )}
                                </div>
                              </div>

                              <div className="col-md-12 ">
                                <div className="row">
                                  <label>Active on days:</label>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Select all:</span>
                                      <Switch
                                        // style={{ backgroundColor: "green" }}
                                        className="col-md-4"
                                        value={
                                          daysBoolean.availableOnMonday &&
                                          daysBoolean.availableOnTuesday &&
                                          daysBoolean.availableOnWednesday &&
                                          daysBoolean.availableOnThursday &&
                                          daysBoolean.availableOnFriday &&
                                          daysBoolean.availableOnSaturday &&
                                          daysBoolean.availableOnSunday
                                        }
                                        id={"availableOnMonday"}
                                        name="availableOnMonday"
                                        onChange={e => {
                                          setDaysBoolean({
                                            availableOnMonday: e,
                                            availableOnTuesday: e,
                                            availableOnWednesday: e,
                                            availableOnThursday: e,
                                            availableOnFriday: e,
                                            availableOnSaturday: e,
                                            availableOnSunday: e
                                          });
                                          // setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
                                          // console.log("availableOnMonday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Monday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnMonday}
                                        id={"availableOnMonday"}
                                        name="availableOnMonday"
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnMonday: e });
                                          console.log("availableOnMonday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Tuesday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnTuesday}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnTuesday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        id={"availableOnTuesday"}
                                        // onChange={handleChange}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Wednesday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnWednesday}
                                        id={"availableOnWednesday"}
                                        // onChange={handleChange}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnWednesday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Thursday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnThursday}
                                        id={"availableOnThursday"}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnThursday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Friday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnFriday}
                                        id={"availableOnFriday"}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnFriday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Saturday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnSaturday}
                                        id={"availableOnSaturday"}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnSaturday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                  <div className="col-6 my-2">
                                    <div className="d-flex">
                                      <span className="col-md-6">Sunday:</span>
                                      <Switch
                                        className="col-md-4"
                                        value={daysBoolean.availableOnSunday}
                                        id={"availableOnSunday"}
                                        onChange={e => {
                                          setDaysBoolean({ ...daysBoolean, availableOnSunday: e });
                                          // console.log("availableOnTuesday", daysBoolean);
                                        }}
                                        checkedChildren="Active"
                                        unCheckedChildren="Not Active"
                                      />
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div className="row mt-5">
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <div className="row">
                                    <div className="col-2 col-lg-4">
                                      <label>Total duration (in Mins)</label>
                                      <input
                                        value={values.durationUnit}
                                        type="number"
                                        id="durationUnit"
                                        name="durationUnit"
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        style={{ width: "100%" }}
                                      ></input>
                                      {errors.durationUnit && touched.durationUnit && <span className="form-error">{errors.durationUnit}</span>}
                                    </div>
                                    <div className="col-5 col-lg-4">
                                      <label>Minimum duration</label>
                                      <input value={values.minDuration} id="minDuration" name="minDuration" onChange={handleChange} onBlur={handleBlur}></input>
                                      {touched.minDuration && errors.minDuration && (
                                        <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                          {errors.minDuration}
                                        </span>
                                      )}
                                    </div>

                                    <div className="col-2 col-lg-4">
                                      <label>Maximum duration</label>
                                      <input
                                        value={values.maxDuration}
                                        id="maxDuration"
                                        name="maxDuration"
                                        onChange={handleChange}
                                        onBlur={handleBlur}
                                        style={{ width: "100%" }}
                                      ></input>
                                      {errors.maxDuration && touched.maxDuration && <span className="form-error">{errors.maxDuration}</span>}
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Age Group</label>
                                  <select value={values.ageGroup} id={"ageGroup"} name={"ageGroup"} onChange={handleChange} onBlur={handleBlur}>
                                    <option value="">Select</option>
                                    <option value="5">5+</option>
                                    <option value="10">10+</option>
                                    <option value="15">15+</option>
                                    <option value="20">20+</option>
                                    <option value="25">25+</option>
                                  </select>
                                  {touched.ageGroup && errors.ageGroup && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.ageGroup}
                                    </span>
                                  )}
                                </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={`linkOfBooking`} onChange={handleChange} onBlur={handleBlur} value={values.linkOfBooking} />
                                  {touched.linkOfBooking && errors.linkOfBooking && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.linkOfBooking}
                                    </span>
                                  )}
                                </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={`contactPersonForBooking`} onChange={handleChange} onBlur={handleBlur} value={values.contactPersonForBooking} />
                                  {touched.contactPersonForBooking && errors.contactPersonForBooking && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.contactPersonForBooking}
                                    </span>
                                  )}
                                </div>
                              </div>
                              <div className="col-12 col-lg-6">
                                <div className="input-group">
                                  <label>Contact Person Number</label>
                                  <div className="contact-number">
                                    <select id={`countryCode`} name={`countryCode`} onChange={handleChange} onBlur={handleBlur} style={{ width: "80px" }}>
                                      <option value="+91">+91</option>
                                      <option value="+44">+44</option>
                                    </select>
                                    <input type="text" name={`contactNumberForBooking`} onChange={handleChange} onBlur={handleBlur} value={values.contactNumberForBooking} />
                                  </div>
                                  {touched.contactNumberForBooking && errors.contactNumberForBooking && (
                                    <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                      {errors.contactNumberForBooking}
                                    </span>
                                  )}
                                </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={`cancellationPolicyFile`}
                                      name={`cancellationPolicyFile`}
                                      onChange={event => {
                                        if (event) {
                                          const file = event.currentTarget.files[0];
                                          setFieldValue(`cancellationPolicyFile`, file);
                                        }
                                      }}
                                      onBlur={handleBlur}
                                      onClick={event => {
                                        const { target = {} } = event || {};
                                        target.value = "";
                                      }}
                                    />
                                    <label className="custom-file-label" htmlFor={`cancellationPolicyFile`}>
                                      Upload
                                    </label>
                                  </div>
                                  {values.cancellationPolicyFile && (
                                    <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
                                      <p className="textS m-0">{values.cancellationPolicyFile.name}</p>
                                      <FaTimes
                                        style={{ cursor: "pointer" }}
                                        onClick={() => {
                                          setFieldValue(`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={`termsConditionsFile`}
                                      name={`termsConditionsFile`}
                                      onChange={event => {
                                        if (event) {
                                          const file = event.currentTarget.files[0];
                                          setFieldValue(`termsConditionsFile`, file);
                                        }
                                      }}
                                      onBlur={handleBlur}
                                      onClick={event => {
                                        const { target = {} } = event || {};
                                        target.value = "";
                                      }}
                                    />
                                    <label className="custom-file-label" htmlFor={`termsConditionsFile`}>
                                      Upload
                                    </label>
                                  </div>
                                  {values.termsConditionsFile && (
                                    <div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
                                      <p className="textS m-0">{values.termsConditionsFile.name}</p>
                                      <FaTimes
                                        style={{ cursor: "pointer" }}
                                        onClick={() => {
                                          setFieldValue(`termsConditionsFile`, "");
                                        }}
                                      />
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="row d-flex ">
                          <div className="col-2">
                            <ImageUploadPopUp
                              isUpdate={isUpdate}
                              setimagesArrayComponent={setimagesArrayComponent}
                              imagesArrayComponent={imagesArrayComponent}
                              populatedImages={activityById?.data.attributes.imagesComponent[0]}
                            />
                          </div>
                          <div className="col-2">
                            <ImageUploadPopUp
                              isUpdate={isUpdate}
                              setimagesArrayComponent={setimagesArrayComponent}
                              imagesArrayComponent={imagesArrayComponent}
                              populatedImages={activityById?.data.attributes.imagesComponent[1]}
                            />
                          </div>
                          <div className="col-2">
                            <ImageUploadPopUp
                              isUpdate={isUpdate}
                              setimagesArrayComponent={setimagesArrayComponent}
                              imagesArrayComponent={imagesArrayComponent}
                              populatedImages={activityById?.data.attributes.imagesComponent[2]}
                            />
                          </div>
                          <div className="col-2">
                            <ImageUploadPopUp
                              isUpdate={isUpdate}
                              setimagesArrayComponent={setimagesArrayComponent}
                              imagesArrayComponent={imagesArrayComponent}
                              populatedImages={activityById?.data.attributes.imagesComponent[3]}
                            />
                          </div>
                          <div className="col-2">
                            <ImageUploadPopUp
                              isUpdate={isUpdate}
                              setimagesArrayComponent={setimagesArrayComponent}
                              imagesArrayComponent={imagesArrayComponent}
                              populatedImages={activityById?.data.attributes.imagesComponent[4]}
                            />
                          </div>
                        </div>
                        {console.log("setimagesArrayComponent", imagesArrayComponent)}
                        <br />
                        <>
                          {/* <button
                            onClick={e => {
                              e.preventDefault();
                              setshowImageUploadModal(true);
                            }}
                          >
                            Open{" "}
                          </button> */}
                          {/* <br />
                          <br /> */}
                        </>
                        {console.log("errors", errors)}
                        <div className="row">
                          <div className="col-6 col-lg-5">
                            <div className="input-group">
                              <Button type="submit" className="btn btn-primary btn-submit" disabled={Object.keys(errors).length > 0}>
                                Submit
                              </Button>
                            </div>
                          </div>
                          <div className="col-6 col-lg-5">
                            <div className="input-group">
                              <Button
                                onClick={() => {
                                  router.push("/vendor/activities");
                                }}
                                className="btn btn-primary btn-submit"
                              >
                                See all activities
                              </Button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </Form>
                  )}
                </Formik>
              </div>
            </div>
          </div>
          {/* <Modal show={showImageUploadModal} centered onHide={() => setshowImageUploadModal()}>
            <Modal.Header closeButton>Add Images</Modal.Header>
            <Modal.Body>
            </Modal.Body>
          </Modal> */}
          <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;