"use client";

import React, { useState } from "react";
import Link from "next/link";
import { useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import { usePathname, useRouter } from "next/navigation";
import H2 from "@/app/components/common/h2";
import { EventRecurrenceFn } from "@/i18n/i18nCM/i18CM";

const EventCardWeb = React.lazy(() => import("../../../components/EventCardWeb/EventCardWeb"))
import GuestCheckoutFormModal from "@/app/components/SiteModal/GuestCheckoutFormModal/GuestCheckoutFormModal";


const EventList = ({ languageName }) => {

  // Translation
  const { i18n } = useTranslation();
  const EventRecurrence = EventRecurrenceFn(i18n);

  const router = useRouter()
  const pathName = usePathname();

  const { sponsoredList } = useSelector(
    (m) => m.categorySponsoredSlice
  );

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

  const NoDataHeading = sponsoredList && Object.values(sponsoredList).flat();

  const [isClientModalOpen, setIsClientModalOpen] = useState(false)

  const handleBookAsGuest = (item) => {

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

    // setIsClientModalOpen(true)
    router.push(`${item?.isSponsored && pathName === "/"
      ? `/sponsored/${item?.slug ? item?.slug : item?._id ? item?._id : item?.eventId}`
      : `/${item?.categorySlug}/${item?.slug ? item?.slug : item?._id ? item?._id : item?.eventId
      }`}`)

  }

  return (
    <>

      {sponsoredList?.length <= 0 && (
        <>
          <div className="data-not-found">
            {i18n.t(`sponsoredEperience.noData`)}
          </div>
        </>
      )}

      {sponsoredList?.length > 0 && (
        sponsoredList?.map((item, index) => {
          return (
            <div className="web-events-wrapper" key={index}>
              <div className="event-title-wrapper flex items-center justify-between flex-wrap">
                <h2 className="ca-event-title">{item?.title}</h2>
                <Link href={`/${item?.categorySlug}/`} className="event-title-link" >
                  {i18n.t(`sponsoredEperience.seeAll`)}
                  <span className="ns-icon ns-icon-arrow-right"></span>
                </Link>
              </div>
              <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-5  experience-events-lists">
              {/* <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-5  experience-events-lists"> */}
                {item?.eventList?.slice(0, 4)?.map((item, index) => {
                  const duration = EventRecurrence?.find((e) => e?.id === item?.duration)
                  const allTicketsSoldOut = item?.allTicketsSoldOut
                  return (
                    <React.Fragment key={index}>
                      <EventCardWeb
                        item={item}
                        languageName={languageName}
                        category={item?.category}
                        duration={duration}
                        allTicketsSoldOut={allTicketsSoldOut}
                        handleBookAsGuest={() => handleBookAsGuest(item)}
                      />
                    </React.Fragment>
                  );
                })}
              </div>
            </div>
          )
        })

      )}
      {/* <GuestCheckoutFormModal show={isClientModalOpen} setIsClientModalOpen={setIsClientModalOpen} /> */}

      {/* {sponsoredList?.experienceEvents?.length > 0 && (
        <div className="web-events-wrapper">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.experiences`)}</H2>
            <Link href="/event/">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.experienceEvents?.map((item, index) => {
              const duration = EventRecurrence?.find((e) => e?.id === item?.duration)
              const allTicketsSoldOut = item?.allTicketsSoldOut
              return (
                <React.Fragment key={index}>
                  <EventCardWeb
                    item={item}
                    languageName={languageName}
                    category={item?.category}
                    duration={duration}
                    allTicketsSoldOut={allTicketsSoldOut}
                  />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {sponsoredList?.classesEvents?.length > 0 && (
        <div className="web-events-wrapper pb-120">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.classes`)}</H2>
            <Link href="/classes/">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.classesEvents?.map((item, index) => {
              const duration = EventRecurrence?.find((e) => e?.id === item?.duration)
              const allTicketsSoldOut = item?.allTicketsSoldOut
              return (
                <React.Fragment key={index}>
                  <EventCardWeb item={item} languageName={languageName} category={item?.category} duration={duration} allTicketsSoldOut={allTicketsSoldOut} />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {sponsoredList?.treatsEvents?.length > 0 && (
        <div className="web-events-wrapper pb-120">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.treats`)}</H2>
            <Link href="/treats/">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.treatsEvents?.map((item, index) => {
              const allTicketsSoldOut = item?.allTicketsSoldOut
              return (
                <React.Fragment key={index}>
                  <EventCardWeb item={item} languageName={languageName} category={item?.category} allTicketsSoldOut={allTicketsSoldOut} />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {sponsoredList?.retreatsEvents?.length > 0 && (
        <div className="web-events-wrapper pb-120">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.retreats`)}</H2>
            <Link href="/retreats">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.retreatsEvents?.map((item, index) => {
              const duration = EventRecurrence?.find((e) => e?.id === item?.duration)
              const allTicketsSoldOut = item?.allTicketsSoldOut
              return (
                <React.Fragment key={index}>
                  <EventCardWeb item={item} languageName={languageName} category={item?.category} duration={duration} allTicketsSoldOut={allTicketsSoldOut} />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {sponsoredList?.coachingsEvents?.length > 0 && (
        <div className="web-events-wrapper pb-120">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.coaching`)}</H2>
            <Link href="/coachings/">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.coachingsEvents?.map((item, index) => {
              const allTicketsSoldOut = item?.allTicketsSoldOut

              return (
                <React.Fragment key={index}>
                  <EventCardWeb item={item} languageName={languageName} category={item?.category} allTicketsSoldOut={allTicketsSoldOut} />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )}

      {sponsoredList?.trainingsEvents?.length > 0 && (
        <div className="web-events-wrapper pb-120">
          <div className="event-title-wrapper flex items-center justify-between flex-wrap">
            <H2>{i18n.t(`sponsoredEperience.Training`)}</H2>
            <Link href="/training">
              {i18n.t(`sponsoredEperience.seeAll`)}
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 ">
            {sponsoredList?.trainingsEvents?.map((item, index) => {
              const allTicketsSoldOut = item?.allTicketsSoldOut
              return (
                <React.Fragment key={index}>
                  <EventCardWeb item={item} languageName={languageName} category={item?.category} allTicketsSoldOut={allTicketsSoldOut} />
                </React.Fragment>
              );
            })}
          </div>
        </div>
      )} */}
    </>
  );
};

export default EventList;