"use client"
import { SwiperSlide } from "swiper/react"
import { useContext, useEffect } from "react"
import { EventsContext } from "../../../../context/Events"
import { isEmpty } from "../../../../services/commonServices"
import dynamic from "next/dynamic"
import useCheckMobileScreen from "../../../../components/hooks/useCheckMobileScreen"

const BreadCrumb = dynamic(
    () => {
      return import("../../../../components/core/BreadCrumb/BreadCrumb");
    },
    { ssr: false }
  );
  const SplitBanner = dynamic(
    () => {
      return import("../../../../components/layout/Banner/SplitBanner");
    },
    { ssr: false }
  );
  const ChallengeList = dynamic(
    () => {
      return import("../../../../components/layout/CaseStudy/ChallengeList");
    },
    { ssr: false }
  );
  const Heading = dynamic(
    () => {
      return import("../../../../components/layout/Heading");
    },
    { ssr: false }
  );
  const ImageSlider = dynamic(
    () => {
      return import("../../../../components/layout/Innovations/ImageSlider");
    },
    { ssr: false }
  );
  const CustomSlider = dynamic(
    () => {
      return import("../../../../components/layout/Slider/CustomSlider");
    },
    { ssr: false }
  );
  const Tag = dynamic(
    () => {
      return import("../../../../components/layout/Tag");
    },
    { ssr: false }
  );
  const CardGlobal = dynamic(
    () => {
      return import("../../../../components/layout/CardGlobal/CardGlobal");
    },
    { ssr: false }
  );
  const Seo = dynamic(
    () => {
      return import("../../../../components/core/Seo");
    },
    { ssr: false }
  );


const EventDetail = () => {
    const { isMobile, isIpad } = useCheckMobileScreen()
    const { eventDetail, getEventsDetail } = useContext(EventsContext)

    useEffect(() => {
        getEventsDetail()
    }, [])

    if (isEmpty(eventDetail)) return null

    return (
        <>
            { !isEmpty(eventDetail?.seo) && <Seo data={eventDetail?.seo} />}
            <BreadCrumb data={eventDetail?.breadcrumb} className={`position--absolute container--fluid`} />
            <SplitBanner isSlider={true} bannerData={eventDetail?.bannerData} />
            {
                !isEmpty(eventDetail?.section1?.description) || !isEmpty(eventDetail?.section1?.image) ?
                    <section className="container--fluid pt--60 pb--60 bg--grey-lighter">
                        <Tag tagName={eventDetail?.section1?.tagName} />
                        <Heading data={eventDetail?.section1} className={isMobile || isIpad ? 'mb--30 mt--15' : `flex mb--60 mt--30`} headClass={isMobile || isIpad ? '' : `width--column-four-0 pr--20`} subHeadClass={isMobile || isIpad ? '' : `no--margin width--column-two-0 mt--40`} hSize={isMobile || isIpad ? 50 : 65} />
                        <ChallengeList ImageWidth="width--column-one" mobRev={true} data={eventDetail?.section1} showHeading={false} rev={true} className={`width--column-one bg--white`} />
                    </section>
                    : ''
            }
            {
                !isEmpty(eventDetail?.section2?.sliderData) ?
                    <ImageSlider fullHeading={true} data={eventDetail?.section2} />
                    : ''
            }
            {
                !isEmpty(eventDetail?.section3?.sliderData) ?
                    <ImageSlider fullHeading={true} data={eventDetail?.section3} themeLight={true} />
                    : ''
            }
            {
                !isEmpty(eventDetail?.section4?.content) ?
                    <section className="container--fluid bg--grey-lighter pb--50 pt--50">
                        <Heading className="mb--30" data={eventDetail?.section4} hSize={isMobile || isIpad ? 50 : 65} />
                        <CustomSlider arrowColor={`blue-primary`} slidesPerView={isMobile || isIpad ? 1 : 2} navigation={true} spaceBetween={40}>
                            {eventDetail?.section4?.content?.map((data, index) => (
                                <SwiperSlide className="pt--10 pb--10" key={`more-events-${index}`}>
                                    <CardGlobal imgH={400} card={data} hColor={`black-primary`} subHColor={`black-primary`} linkColor={`blue-primary`} className={`height--one mb--10`} cClass={`height--one ${isMobile || isIpad ? 'pt--20' : 'pt--30'}`} cPadding={'0'} noShadow={true} imgClass='bg--radius-10' />
                                </SwiperSlide>
                            ))}
                        </CustomSlider>
                    </section>
                    : ''
            }
        </>
    )
}

export default EventDetail