import { type PropsWithChildren } from 'react'

import { PopupModal } from '~/components/popup/modal'
import { SuccessModal } from '~/components/popup/success-modal'
import { Banner } from '~/components/ui/banner'
import { useNewsContext } from '~/contexts/news'
import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
import { FormLogin } from '~/layouts/news/form-login'
import { FormRegister } from '~/layouts/news/form-register'

import { FooterLinks } from './footer-links'
import { FooterNewsletter } from './footer-newsletter'
import FormSubscription from './form-subscription'
import { HeaderMenu } from './header-menu'
import { HeaderTop } from './header-top'

export const NewsDefaultLayout = (properties: PropsWithChildren) => {
  const { children } = properties
  const {
    isLoginOpen,
    setIsLoginOpen,
    isRegisterOpen,
    setIsRegisterOpen,
    isForgetOpen,
    setForgetOpen,
    isSuccessModalOpen,
    setIsSuccessModalOpen,
    isInitSubscribeOpen,
    setIsInitSubscribeOpen,
  } = useNewsContext()
  return (
    <main className="relative min-h-dvh bg-[#ECECEC]">
      <header>
        <HeaderTop />
        <HeaderMenu />
      </header>
      <div className="grid sm:mx-[50px] sm:my-[25px] sm:gap-y-[25px]">
        <Banner />
        {children}
      </div>

      <footer className="grid w-full grid-cols-1 gap-6 bg-[#2E2F7C] px-5 py-20 text-white sm:grid-cols-5 sm:gap-16 sm:px-16">
        <FooterNewsletter />
        <FooterLinks />
      </footer>

      <PopupModal
        isOpen={isLoginOpen}
        onClose={() => setIsLoginOpen(false)}
        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
      >
        <FormLogin
          setIsRegisterOpen={setIsRegisterOpen}
          setIsLoginOpen={setIsLoginOpen}
          setIsForgetOpen={setForgetOpen}
          setIsInitSubscribeOpen={setIsInitSubscribeOpen}
        />
      </PopupModal>

      <PopupModal
        isOpen={isRegisterOpen}
        onClose={() => setIsRegisterOpen(false)}
        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
      >
        <FormRegister />
      </PopupModal>

      <PopupModal
        isOpen={isForgetOpen}
        onClose={() => setForgetOpen(false)}
        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
      >
        <FormForgotPassword />
      </PopupModal>

      <PopupModal
        isOpen={isInitSubscribeOpen}
        onClose={() => setIsInitSubscribeOpen(false)}
        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
      >
        <FormSubscription />
      </PopupModal>

      <SuccessModal
        isOpen={isSuccessModalOpen}
        onClose={() => {
          if (setIsSuccessModalOpen) {
            setIsSuccessModalOpen(undefined)
          }
        }}
      />
    </main>
  )
}