'use client'
import { useContext, useEffect } from "react"
import dynamic from "next/dynamic"
import { ContactContext } from "../../../context/Contact"
import { isEmpty } from "../../../services/commonServices"
import useCheckMobileScreen from "../../../components/hooks/useCheckMobileScreen"

const BreadCrumb = dynamic(
    () => {
      return import("../../../components/core/BreadCrumb/BreadCrumb");
    },
    { ssr: false }
  );
  const Icon = dynamic(
    () => {
      return import("../../../components/core/Icon");
    },
    { ssr: false }
  );
  const ContactCard = dynamic(
    () => {
      return import("../../../components/layout/Contact/ContactCard");
    },
    { ssr: false }
  );
  const ContactForm = dynamic(
    () => {
      return import("../../../components/layout/Contact/ContactForm");
    },
    { ssr: false }
  );
  const Heading = dynamic(
    () => {
      return import("../../../components/layout/Heading");
    },
    { ssr: false }
  );
  const Seo = dynamic(
    () => {
      return import("../../../components/core/Seo");
    },
    { ssr: false }
  );
  const Tag = dynamic(
    () => {
      return import("../../../components/layout/Tag");
    },
    { ssr: false }
  );

const ContactUs = () => {
    const { isMobile, isIpad } = useCheckMobileScreen()
    const {contactData, getContactData} = useContext(ContactContext)
    
    useEffect(()=>{
        getContactData()
    }, [])

    if(!isEmpty(contactData)) {
        return(
            <>
            { !isEmpty(contactData?.seo) && <Seo data={contactData?.seo} />}
            <BreadCrumb homeColor={`black`} color={`black`} data={contactData?.breadCrumData} className={`bg--grey-lighter container--fluid contact--breadcrumb`}/>
            <section className={`${isMobile || isIpad ? '' : 'bg--network-bottom-right'} container--fluid pt--25 bg--grey-lighter position--relative pb--${isMobile || isIpad ? 50 : 100}`}>
                <Tag tagName={contactData?.tagName} />
                {contactData?.tagName && <Tag tagName={contactData?.tagName} />}
                <Heading data={contactData} className={isMobile || isIpad ? '' : `flex`} headClass={isMobile || isIpad ? '': `width--column-three-20`} subHeadClass={isMobile || isIpad ? '' : `width--column-three-40`}/>
                <div className={`${isMobile ? 'flex--direction-column-rev' : ''} flex flex--wrap flex--justify-content-between mt--${isMobile || isIpad ? 25 : 50}`}>
                  <ContactCard data={contactData?.cardData} />
                  <ContactForm data={contactData?.form_Details} />
                </div>
            </section>
            </>
        )
    } else {
        return null
    }
    
}

export default ContactUs