"use client";
import React, { useEffect, useState } from "react";
import "./EventDeatils.scss";
import "swiper/css";
import "swiper/css/pagination";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination } from "swiper/modules";
import H1 from "@/app/components/common/h1";
import Link from "next/link";
import EventProviderList from "@/app/components/EventProviderList/EventProviderList";
import Image from "next/image";
import { useSelector, useDispatch } from "react-redux";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { priceFormator } from "@/utils/commonfn/PriceCMFun/index";
import {
  convertTimestampToTimeFormat,
  eventdetailsformatDate,
  eventdetailsformatFullDate,
  // eventType,
  language,
  currency,
  currencyName,
  newDatetimeFunc,
  newtimeFunc,
  eventdetailsStartformatDate,
  eventdetailsFullStartformatDate
  // eventDetailsCategory
} from "@/app/components/common/Common";
import LightboxSlider from "@/app/components/LightboxSlider/LightboxSlider";
import { asyncEventDetailsPayment } from "../../../../../../../../redux/Thunks/User/eventdetailspayment.thunk";
import LoaderBtn from "@/app/components/common/LoaderBtn";
import {
  eventDetailsCategoryFN,
  eventTypeFn,
  paramsCategoryFn,
} from "@/i18n/i18nCM/i18CM";
import { useTranslation } from "react-i18next";
import { useParams } from "next/navigation";
import UserBreadCrumb from "@/app/components/UserBreadCrumb/UserBreadCrumb";

import StaticImage from '@/public/assets/images/event-detail-hidden.webp'
import ShareButton from "@/app/components/ShareButton/ShareButton";

import GuestCheckoutFormModal from '@/app/components/SiteModal/GuestCheckoutFormModal/GuestCheckoutFormModal'
import InnerEventsImage from '../../../../../../../../public/assets/images/event-detail-banner-bg.webp'
// import CardShapeImage from '../../../../../../../../public/assets/images/icon-card-shape.webp'
import { asyncPreSignUp } from '../../../../../../../../redux/Thunks/User/preSignUp.thunk'
import { eventNotificationThunk } from "../../../../../../../../redux/Thunks/Organizer/Notification/notification.thunk";
import AboutEventOrganizer from "../AboutEvent/AboutEventOrganizer";

const EventDeatils = ({ eventDetails, languageName, authToken, NEXT_WEB_DOMAIN, NEXT_PERENT_WEB_DOMAIN }) => {

  const { i18n } = useTranslation();
  const router = useRouter();
  const dispatch = useDispatch();
  const pathname = usePathname();
  const params = useParams();
  const params1 = paramsCategoryFn(i18n);
  const [count, setCount] = useState(1);
  const [checkAsAGift, setCheckAsAGift] = useState(false);
  const { userData } = useSelector((m) => m.authentication);
  const [Modal, setModal] = useState(false);
  const [isClient, setIsClient] = useState(false)
  const [isClientModalOpen, setIsClientModalOpen] = useState(false)
  const [isPreSignUp, setIsPreSignUp] = useState(false)
  const { eventDetailsPayment, isLoading } = useSelector(
    (m) => m.eventdetailspayment
  );
  const eventDetailsCategory = eventDetailsCategoryFN(i18n);
  const eventType = eventTypeFn(i18n);

  const searchParams = useSearchParams();
  const redirectStatus = searchParams.get('redirect_status');
  // console.log('eventDetails', eventDetails)

  const breadcrumbItems = [
    { name: i18n.t(`userBreadcrumb.home`), url: `${NEXT_PERENT_WEB_DOMAIN}` },
    {
      name: `${eventDetails?.eventData?.categoryDetails?.title}`,
      url: `${params?.category === 'sponsored' ? '/' : `/${params.category}/`}`,
    },
    {
      name: i18n.t(`userBreadcrumb.experiencesDetails`)
      // url: ``,
    },
  ];

  // console.log('eventDetails', eventDetails)

  useEffect(() => {
    if (userData) {
      if (redirectStatus) {
        dispatch(
          eventNotificationThunk(
            {
              page: 1,
              limit: 10,
            }
          )
        );
      }
      router.refresh();
    }
    if (eventDetails) {
      router.refresh();
    }
  }, [userData]);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (userData && redirectStatus) {
        dispatch(
          eventNotificationThunk({
            page: 1,
            limit: 10,
          })
        );
      }
    }, 5000); // 5000ms = 5 seconds

    // Clean up the timeout if the component unmounts or if dependencies change
    return () => clearTimeout(timer);
  }, [userData, redirectStatus, dispatch]);

  const HandleBookEvent = (id) => {
    if (userData) {
      // console.log('userData', userData)
      if (id === "view") {
        router.push(
          `/e-ticket?tId=${eventDetails?.eventData?.eventId}&cId=${params.category}`
        );
      } else if (id === 'presignup') {
        let obj = {
          eventId: eventDetails?.eventData?.eventId,
          userId: userData?.data?.userId
        }
        dispatch(asyncPreSignUp(obj))
      } else {
        router.push(
          `/payment?eId=${eventDetails?.eventData?.eventId}&cId=${params.category}&qty=${count}&gt=${checkAsAGift}`
        );
      }
    }

    else {
      // router.push(`/signin/`);
      if (id === 'presignup') {
        setIsClientModalOpen(true)
      } else {
        setIsClientModalOpen(true)
      }
    }
  };
  useEffect(() => {
    dispatch(
      asyncEventDetailsPayment({
        slug: eventDetails?.eventData?.slug,
        // eventId: eventDetails?.eventData?.eventId,
        web: true,
      })
    );
  }, []);


  useEffect(() => {
    const IsClientCheck = setTimeout(() => {
      setIsClient(true)
    }, 2000);

    return () => clearTimeout(IsClientCheck);
  }, []);


  const SetEventDate = () => {
    // if (eventDetails?.eventData?.startTime) {
    //   if (eventDetails?.eventData?.endTime) {
    //     return `${eventdetailsformatFullDate(
    //       parseInt(eventDetails?.eventData?.startTime),
    //       languageName
    //     )} - ${eventdetailsformatFullDate(
    //       parseInt(eventDetails?.eventData?.endTime),
    //       languageName
    //     )}`;
    //   } else {
    //     return `${eventdetailsformatFullDate(
    //       parseInt(eventDetails?.eventData?.startTime),
    //       languageName
    //     )}`;
    //   }
    // } else {
    //   return "";
    // }
    if (eventDetails?.eventData?.eventStartTime) {
      if (eventDetails?.eventData?.eventEndTime) {
        return `
        ${eventdetailsFullStartformatDate(eventDetails?.eventData?.eventStartTime, languageName)}
        - ${eventdetailsFullStartformatDate(eventDetails?.eventData?.eventEndTime, languageName)}
        `;
      } else {
        // return `${newDatetimeFunc(
        //   eventDetails?.eventData?.eventStartTime,"eventDetailWeb",
        //   languageName
        // )}`;
        return `${eventdetailsFullStartformatDate(eventDetails?.eventData?.eventStartTime, languageName)}`
      }
    } else {
      return "";
    }

  };
  const SetEventTime = () => {
    // if (eventDetails?.eventData?.startTime) {
    //   if (eventDetails?.eventData?.endTime) {
    //     return `${convertTimestampToTimeFormat(
    //       parseInt(eventDetails?.eventData?.startTime)
    //     )} - ${convertTimestampToTimeFormat(
    //       parseInt(eventDetails?.eventData?.endTime)
    //     )} 
    //     ${eventDetails?.eventData?.eventTimeZone && eventDetails?.eventData?.eventTimeZone?.label?.split(" ")[0] || ""}
    //     `;
    //     // (${TimeZoneMoment()})
    //   } else {
    //     return `${convertTimestampToTimeFormat(
    //       parseInt(eventDetails?.eventData?.startTime)
    //     )}
    //     ${eventDetails?.eventData?.eventTimeZone && eventDetails?.eventData?.eventTimeZone?.label?.split(" ")[0] || ""}
    //     `;
    //     // (${TimeZoneMoment()})
    //   }
    if (eventDetails?.eventData?.eventStartTime) {
      if (eventDetails?.eventData?.eventEndTime) {
        return `${newtimeFunc(
          eventDetails?.eventData?.eventStartTime, languageName
        )} - ${newtimeFunc(
          eventDetails?.eventData?.eventEndTime, languageName
        )} 
        ${eventDetails?.eventData?.eventTimeZone && eventDetails?.eventData?.eventTimeZone?.label?.split(" ")[0] || ""}
        `;
        // (${TimeZoneMoment()})
      } else {
        return `${newtimeFunc(
          eventDetails?.eventData?.eventStartTime, languageName
        )}
        ${eventDetails?.eventData?.eventTimeZone && eventDetails?.eventData?.eventTimeZone?.label?.split(" ")[0] || ""}
        `;
        // (${TimeZoneMoment()})
      }
    } else {
      return "";
    }
  };

  const isUserAttendingEvent = (eventDetails?.isUserAttendingEvent || eventDetailsPayment?.data?.isUserAttendingEvent);
  const EventListWrapper = [
    {
      icon: (
        <>
          <i className="icon-calendar"></i>
        </>
      ),
      title: SetEventDate(),
      subTitle: SetEventTime(),
    },
    {
      icon: (
        <>
          <i className="icon-clock"></i>
        </>
      ),
      title: eventDetails?.eventData?.eventDuration,
      subTitle: 'Duration',
    },
    {
      icon: (
        <>
          <i className="icon-location"></i>
        </>
      ),
      title:
        eventDetails?.eventData?.city?.name ||
        ([1, 2].includes(eventDetails?.eventData?.eventType) &&
          eventType?.[eventDetails?.eventData?.eventType]),
      subTitle: eventDetails?.eventData?.venue
        ? eventDetails?.eventData?.venue
        : (isUserAttendingEvent && eventDetails?.eventData?.onlineMeetingLink)
          ? i18n.t("useEvent.meetLinkTitle")
          : "",
      link: eventDetails?.eventData?.googleMapsLink,
      meetLink: eventDetails?.eventData?.onlineMeetingLink || "",
    },
    {
      icon: (
        <>
          <i className="icon-ticket"></i>
        </>
      ),
      title: eventDetails?.eventData?.price ? (
        <>
          <i
            className={
              eventDetails?.eventData?.currency === 1
                ? "icon-USD"
                : eventDetails?.eventData?.currency === 2
                  ? "" //////// "icon-CHF"
                  : eventDetails?.eventData?.currency === 3
                    ? "icon-EUR"
                    : ""
            }
          ></i>
          {`${priceFormator(eventDetails?.eventData?.price, i18n?.language)} ${currencyName[eventDetails?.eventData?.currency]
            }`}
        </>
      ) : (
        i18n.t(`useEvent.EventPaid.Free`)
      ),
      subTitle: eventDetails?.eventData?.price
        ? i18n.t(`perPersonText`)
        : i18n.t(`perPersonText`),
    },
    {
      icon: (
        <>
          <i className="icon-ticket"></i>
        </>
      ),
      title: eventDetailsPayment?.data?.availableSeats,
      subTitle: i18n.t(`organizer.event.eventDetails.AvailableBooking`)
    }
  ];

  // {
  //   icon: <i className="icon-ticket"></i>,
  //   title: eventData?.price
  //     ? (eventData?.currency !== 2) ? `${currency?.name}${eventData?.price} ${currency?.title}` : `${eventData?.price} ${currency?.title}`
  //     : i18n.t('organizer.event.eventDetails.free'),
  //   subTitle: eventData?.price ? i18n.t(`organizer.event.eventDetails.pricePerTicket`) : "",
  // },

  useEffect(() => {
    if (!isClientModalOpen) {
      setIsPreSignUp(false)
    }
  }, [isClientModalOpen])

  return (
    <>
      {/* <section className="">
      <div className="container">

      </div>
    </section> */}
      {/* <section className="user-bread-crumb-wrapper">
        <div className="container">
          <UserBreadCrumb items={breadcrumbItems} />
        </div>
      </section> */}
      {/* <section className="event-category-detail">
        <div className="container">
          <div className="xl:flex xl:flex-row xl:justify-end about-inner event-details-wrap relative">
            <div className="w-full xl:w-1/2 xl:absolute image-wrapper">
              <Swiper
                slidesPerView={1}
                spaceBetween={16}
                pagination={{
                  clickable: true,
                }}
                modules={[Pagination]}
                className="mySwiper"
              >
                <React.Fragment>
                  {eventDetails?.eventData?.media
                    ?.map((item, i) => {
                      if (item?.type === "image") {
                        return (
                          <SwiperSlide key={i}>
                            <div className="slide-image-box">
                              <Image
                                src={item?.imageUrl}
                                alt=""
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="overlap-image"
                              />
                              <Image
                                src={StaticImage}
                                alt="Static Image"
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="static-image"
                              />
                              <span className="badge">
                                {
                                  eventDetailsCategory[
                                  eventDetails?.eventData?.category
                                  ]
                                }
                              </span>
                            </div>
                          </SwiperSlide>
                        );
                      } else {
                        return (
                          <SwiperSlide key={i}>
                            <div
                              className="slide-image-box"
                              onClick={() => {
                                setModal(i + 1);
                              }}
                            >
                              <Image
                                src={StaticImage}
                                alt="Static Image"
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="static-image"
                              />
                              <video>
                                <source src={item?.videoUrl}></source>
                              </video>
                              <i className="icon-play-btn play-btn"></i>
                              <span className="badge">
                                {
                                  eventDetailsCategory[
                                  eventDetails?.eventData?.category
                                  ]
                                }
                              </span>
                            </div>
                          </SwiperSlide>
                        );
                      }
                    })}
                </React.Fragment>
              </Swiper>
              {Modal > 0 && (
                <LightboxSlider
                  Modal={Modal}
                  setModal={setModal}
                  eventData={eventDetails?.eventData?.media}
                />
              )}
            </div>
            <div className="w-full xl:w-4/5 content-wrapper" style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', right: '20px', top: '20px' }}>
                <ShareButton />
              </div>
              <div className="flex items-center gap-4 btn-wrap">
                {[1, 2].includes(eventDetails?.eventData?.eventType) && (
                  <div className="event-badge offline-btn">
                    {eventType?.[eventDetails?.eventData?.eventType]}
                  </div>
                )}

                <div className="event-badge lang-btn">
                  {eventDetails?.eventData?.language?.length < 2
                    ? language?.[eventDetails?.eventData?.language?.[0]]
                    : `${language?.[eventDetails?.eventData?.language?.[0]]
                    } & ${language?.[eventDetails?.eventData?.language?.[1]]
                    }`}
                </div>
              </div>

              <H1 className="h2 title">{eventDetails?.eventData?.title}</H1>
              <EventProviderList
                EventListWrapper={EventListWrapper}
                booking={
                  eventDetails?.isUserAttendingEvent ||
                  eventDetailsPayment?.data?.isUserAttendingEvent
                }
              />
              <>
                {((!eventDetails?.isUserAttendingEvent || !eventDetailsPayment?.data?.isUserAttendingEvent)
                  && eventDetails?.eventData?.allTicketsSoldOut) ? (
                  <span className="solid-btn">
                    {i18n.t("useEvent.SoldOut")}
                  </span>
                ) : (
                  (eventDetails?.isUserAttendingEvent ||
                    eventDetailsPayment?.data?.isUserAttendingEvent) ? (
                    <button
                      className="solid-btn"
                      onClick={() => HandleBookEvent("view")}
                    >
                      {i18n.t("useEvent.ViewTicket")}
                    </button>
                  ) : (
                    <>
                      <div className="flex items-center flex-wrap qty-group-wrapper">
                        <div className="qty-group">
                          <span className="count">{count}</span>
                          <span
                            className="icon-back qty-btn min"
                            onClick={() => {
                              if (count > 1) {
                                setCount((e) => e - 1);
                              }
                            }}
                          ></span>
                          <span
                            className="icon-back qty-btn max"
                            onClick={() => {
                              if (count < 10) {
                                setCount((e) => e + 1);
                              }
                            }}
                          ></span>
                        </div>
                        <p>{i18n.t("useEvent.NumberofTikits")}</p>
                      </div>
                      {eventDetails?.eventData?.eventType === 3 && (
                        <>
                          <div className="flex items-center site-checkbox-group input-group">
                            <input
                              type="checkbox"
                              id="Gift-Check"
                              checked={checkAsAGift}
                              onChange={(e) => {
                                setCheckAsAGift(e.target.checked);
                              }}
                            />
                            <label htmlFor="Gift-Check">
                              {i18n.t("useEvent.asAGift")}
                            </label>
                          </div>
                        </>
                      )}
                      {isClient && userData ?
                        <div className="event-btn-group">
                          <button
                            className="solid-btn"
                            onClick={() => HandleBookEvent("book")}
                          >
                            {i18n.t("useEvent.bookBTN")}
                          </button>
                        </div>
                        :
                        <div className="event-btn-group">
                          <button
                            className="solid-btn"
                            onClick={() => HandleBookEvent("guest")}
                          >
                            {i18n.t("useEvent.bookAsGuestBTN")}
                          </button>
                        </div>
                      }
                    </>
                  )
                )}
              </>
            </div>
          </div>
        </div>
      </section> */}

      {/* New Changes */}
      <section className="event-category-detail">
        <div className="inner-events-image">
          <Image src={InnerEventsImage} alt="event image" width={1920} height={410} />
        </div>
        <div className="inner-events-wrapper">
          <div className="container">
            <div className="ns-event-details-card lg:flex lg:items-stretch lg:justify-between">
              <div className="ns-inner-details">
                <UserBreadCrumb items={breadcrumbItems} />
                <div className="flex items-center gap-4 flex-wrap event-badge-lists">
                  {[1, 2].includes(eventDetails?.eventData?.eventType) && (
                    <div className="event-badge offline-btn">
                      {eventType?.[eventDetails?.eventData?.eventType]}
                    </div>
                  )}

                  <div className="event-badge lang-btn">
                    {eventDetails?.eventData?.language?.length < 2
                      ? language?.[eventDetails?.eventData?.language?.[0]]
                      : `${language?.[eventDetails?.eventData?.language?.[0]]
                      } & ${language?.[eventDetails?.eventData?.language?.[1]]
                      }`}
                  </div>
                </div>
                <h1 className="h2 title">{eventDetails?.eventData?.title}</h1>
                {/* <p>Discover new ways to feel enlightened, or simply a little lighter, on a wellness journey into your soul at Namascape Kaplankaya, your heart at Six Senses Samui, and the jungle at Six Senses Krabey Island.</p> */}
                <div className="events-links-content">
                  {eventDetails?.eventData?.canBeBooked && !eventDetails?.eventData?.isFree &&
                    <>
                      {(eventDetails?.eventData?.allTicketsSoldOut || eventDetails?.availableSeats === 0) ? (
                        <span className="solid-btn">
                          {i18n.t("useEvent.SoldOut")}
                        </span>
                      ) : (
                        // (eventDetails?.isUserAttendingEvent ||
                        //   eventDetailsPayment?.data?.isUserAttendingEvent) 
                        (false)
                          ? (
                            <button
                              className="solid-btn"
                              onClick={() => HandleBookEvent("view")}
                            >
                              {i18n.t("useEvent.ViewTicket")}
                            </button>
                          ) : (
                            <>
                              {eventDetails?.eventData?.canBeBooked &&
                                <div className="flex items-center flex-wrap qty-group-wrapper">
                                  <div className="ns-qty-group">
                                    <span
                                      className="qty-btn min"
                                      onClick={() => {
                                        if (count > 1) {
                                          setCount((e) => e - 1);
                                        }
                                      }}
                                    ></span>
                                    <span className="count">{count}</span>
                                    <span
                                      className="qty-btn max"
                                      onClick={() => {
                                        if (count < 10) {
                                          setCount((e) => e + 1);
                                        }
                                      }}
                                    ></span>
                                  </div>
                                </div>
                              }
                              {eventDetails?.eventData?.canBeBooked && eventDetails?.eventData?.asAGift && (
                                <>
                                  <div className="flex items-center site-checkbox-group input-group">
                                    <input
                                      type="checkbox"
                                      id="Gift-Check"
                                      checked={checkAsAGift}
                                      onChange={(e) => {
                                        setCheckAsAGift(e.target.checked);
                                      }}
                                    />
                                    <label htmlFor="Gift-Check">
                                      {i18n.t("useEvent.asAGift")}
                                    </label>
                                  </div>
                                </>
                              )}

                              {/* {
                      eventDetails?.eventData?.isUpcoming &&
                      !eventDetails?.eventData?.isUserAttendingEvent &&
                      !eventDetails?.eventData?.allTicketsSoldOut ?  */}

                              {authToken ?
                                eventDetails?.eventData?.canBeBooked &&
                                <>
                                  <button
                                    className="solid-btn event-btn"
                                    onClick={() => HandleBookEvent("book")}
                                  >
                                    {i18n.t("useEvent.bookBTN")}
                                  </button>
                                  {eventDetails?.eventData?.preSignUp && <button
                                    className="primary-border-btn event-btn"
                                    onClick={() => HandleBookEvent("presignup")}
                                  >
                                    {i18n.t("PreSignUpTitle")}
                                  </button>}
                                </>

                                :
                                eventDetails?.eventData?.canBeBooked &&
                                <>
                                  <button
                                    className="solid-btn event-btn"
                                    onClick={() => HandleBookEvent("guest")}
                                  >
                                    {i18n.t("useEvent.bookAsGuestBTN")}
                                    <i className="ns-icon ns-icon-arrow-right"></i>
                                  </button>
                                  {eventDetails?.eventData?.preSignUp && <button
                                    className="primary-border-btn event-btn"
                                    onClick={() => { HandleBookEvent("presignup"); setIsPreSignUp(true) }}
                                  >
                                    {i18n.t("PreSignUpTitle")}
                                  </button>}
                                </>
                              }
                              {/* :""
                      } */}
                            </>
                          )
                      )}
                      {/* {eventDetails?.eventData?.isUpcoming && (
                  !eventDetails?.isUserAttendingEvent &&
                  eventDetails?.eventData?.allTicketsSoldOut ? (
                    <span className="solid-btn">
                      {i18n.t("useEvent.SoldOut")}
                    </span>
                  ) : ( */}
                      {/* {eventDetails?.isUserAttendingEvent ||
                      eventDetailsPayment?.data?.isUserAttendingEvent ? (
                        <button
                          className="solid-btn"
                          onClick={() => HandleBookEvent("view")}
                        >
                          {i18n.t("useEvent.ViewTicket")}
                        </button>
                      ) : (
                        <>
                          <div className="flex items-center flex-wrap qty-group-wrapper">
                            <div className="qty-group">
                              <span className="count">{count}</span>
                              <span
                                className="icon-back qty-btn min"
                                onClick={() => {
                                  if (count > 1) {
                                    setCount((e) => e - 1);
                                  }
                                }}
                              ></span>
                              <span
                                className="icon-back qty-btn max"
                                onClick={() => {
                                  if (count < 10) {
                                    setCount((e) => e + 1);
                                  }
                                }}
                              ></span>
                            </div>
                            <p>{i18n.t("useEvent.NumberofTikits")}</p>
                          </div>
                          {eventDetails?.eventData?.eventType === 3 && (
                            <>
                              <div className="flex items-center site-checkbox-group input-group">
                                <input
                                  type="checkbox"
                                  id="Gift-Check"
                                  checked={checkAsAGift}
                                  // onChange={(e) => {
                                  //     const isChecked = e.target.checked;
                                  //     const value = isChecked ? 1 : 0;
                                  //     setCheckAsAGift(value);
                                  // }}
                                  onChange={(e) => {
                                    setCheckAsAGift(e.target.checked);
                                  }}
                                />
                                <label for="Gift-Check">
                                  {i18n.t("useEvent.asAGift")}
                                </label>
                              </div>
                            </>
                          )}
                          <div className="event-btn-group">
                            <button
                              className="solid-btn"
                              onClick={() => HandleBookEvent("book")}
                            >
                              {i18n.t("useEvent.bookBTN")}
                            </button>
                          </div>
                        </>
                      )} */}
                      {/* )
                )} */}
                    </>
                  }
                  {!eventDetails?.eventData?.isFree && <ShareButton URL={`${NEXT_WEB_DOMAIN}${pathname}`} />}
                </div>
              </div>
              {/* <div className="ns-event-shape">
                <Image src={CardShapeImage} alt={'CardShapeImage'} />
              </div> */}
              <div className="ns-about-events">
                <EventProviderList
                  EventListWrapper={EventListWrapper}
                  booking={
                    eventDetails?.isUserAttendingEvent ||
                    eventDetailsPayment?.data?.isUserAttendingEvent
                  }
                />
              </div>
            </div>
            {/* <div className="w-full xl:w-1/2 xl:absolute image-wrapper">
              <Swiper
                slidesPerView={1}
                spaceBetween={16}
                pagination={{
                  clickable: true,
                }}
                modules={[Pagination]}
                className="mySwiper"
              >
                <React.Fragment>
                  {eventDetails?.eventData?.media
                    ?.map((item, i) => {
                      if (item?.type === "image") {
                        return (
                          <SwiperSlide key={i}>
                            <div className="slide-image-box">
                              <Image
                                src={item?.imageUrl}
                                alt=""
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="overlap-image"
                              />
                              <Image
                                src={StaticImage}
                                alt="Static Image"
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="static-image"
                              />
                              <span className="badge">
                                {
                                  eventDetailsCategory[
                                  eventDetails?.eventData?.category
                                  ]
                                }
                              </span>
                            </div>
                          </SwiperSlide>
                        );
                      } else {
                        return (
                          <SwiperSlide key={i}>
                            <div
                              className="slide-image-box"
                              onClick={() => {
                                setModal(i + 1);
                              }}
                            >
                              <Image
                                src={StaticImage}
                                alt="Static Image"
                                title=""
                                width={785}
                                height={658}
                                onClick={() => {
                                  setModal(i + 1);
                                }}
                                className="static-image"
                              />
                              <video>
                                <source src={item?.videoUrl}></source>
                              </video>
                              <i className="icon-play-btn play-btn"></i>
                              <span className="badge">
                                {
                                  eventDetailsCategory[
                                  eventDetails?.eventData?.category
                                  ]
                                }
                              </span>
                            </div>
                          </SwiperSlide>
                        );
                      }
                    })}
                </React.Fragment>
              </Swiper>
              {Modal > 0 && (
                <LightboxSlider
                  Modal={Modal}
                  setModal={setModal}
                  eventData={eventDetails?.eventData?.media}
                />
              )}
            </div> */}
          </div>
        </div>
        {isClientModalOpen && <GuestCheckoutFormModal
          show={isClientModalOpen}
          setIsClientModalOpen={setIsClientModalOpen}
          PreSignUp={isPreSignUp}
          params={params}
          count={count}
          eventDetails={eventDetails}
          checkAsAGift={checkAsAGift}
        />}
      </section >

    </>
  );
};

export default EventDeatils;