'use client';

import Image from 'next/image';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import banner from '@/public/banner-bg.png';
import background from '@/public/bg-img.webp';
import photo from '@/public/photo.png';
import { SideBar } from '../Sidebar';

const DynamicContact = dynamic(
  () => import('@/components/layout').then((mod) => mod.Contact),
  { ssr: false }
);
const Footer = dynamic(
  () => import('@/components/layout').then((mod) => mod.Footer),
  { ssr: false }
);
const Header = dynamic(
  () => import('@/components/layout').then((mod) => mod.Header),
  { ssr: false }
);
const ScrollToTop = dynamic(
  () => import('@/components/layout').then((mod) => mod.ScrollToTop),
  { ssr: false }
);

export const MainLayout = ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const [isOpenSidebar, setIsOpenSidebar] = useState<boolean>(false);
  const [showScrollToTop, setShowScrollToTop] = useState<boolean>(false);

  useEffect(() => {
    const handleScrollBtnVisibility = () =>
      window.scrollY > 300
        ? setShowScrollToTop(true)
        : setShowScrollToTop(false);

    window.addEventListener('scroll', handleScrollBtnVisibility);
    return () => {
      window.removeEventListener('scroll', handleScrollBtnVisibility);
    };
  }, []);

  useEffect(() => {
    document.body.style.overflow = isOpenSidebar ? 'hidden' : 'unset';
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpenSidebar]);

  return (
    <div className="isolate">
      <SideBar isOpen={isOpenSidebar} setIsOpen={setIsOpenSidebar} />
      <div className="relative lg:absolute lg:right-0 lg:w-[calc(100vw-280px)] flex flex-col min-h-screen">
        <Image
          src={background}
          alt="background"
          fill
          priority
          quality={100}
          className="object-cover object-right -z-10"
        />
        <div className="relative flex flex-col h-[270px] sm:h-[290px] md:h-[400px] lg:h-[450px] w-full">
          <Image
            src={banner}
            alt="banner"
            fill
            priority
            quality={100}
            className="object-cover object-[70%_0%] xs:object-[30%_0%] sm:object-right-bottom"
          />
          <Header isOpen={isOpenSidebar} openSidebar={setIsOpenSidebar} />
          <h1 className="absolute bottom-6 xs:bottom-8 sm:bottom-14 w-3/4 xs:w-fit md:w-full sm:static uppercase font-semibold px-6 block text-wrap xs:inline-grid md:px-0 md:font-medium text-foreground text-[15px] 2xs:text-base xs:text-[17px] sm:text-[17px] md:text-[20px] xl:text-[28px] 2xl:text-[32px] tracking-[0.11em] leading-6 md:leading-10">
            <span className="inline-block w-[160px] 2xs:w-[170px] xs:w-fit sm:absolute sm:top-[43%] md:top-[36%] md:left-[30px] lg:left-[40px] 2xl:left-[146px] 3xl:left-[236px] [text-shadow:_0_8px_8px_rgb(0_0_0_/_40%)]">
              Real Estate, Web Projects,&nbsp;
            </span>
            <span className="inline-block w-[210px] sm:w-fit sm:absolute sm:top-[60%] md:top-[49%] md:left-12 lg:left-[40px] xl:left-[100px] 2xl:left-[260px] 3xl:left-[350px] [text-shadow:_0_8px_8px_rgb(0_0_0_/_40%)]">
              Entrepreneurship, Public Speaking&nbsp;
            </span>
            <span className="inline-block 2xs:w-[310px] xs:w-[330px] md:w-fit sm:absolute sm:bottom-[15%] md:bottom-[28%] md:left-20 lg:left-[40px] xl:left-[252px] 2xl:left-[400px] 3xl:left-[490px] [text-shadow:_0_8px_8px_rgb(0_0_0_/_40%)]">
              And Business Development
            </span>
          </h1>
          <Image
            src={photo}
            alt="photo"
            priority
            quality={100}
            className="absolute bottom-1 right-0 w-[112px] sm:hidden"
          />
        </div>
        <main className="grow pb-20 px-[30px] md:px-10 xl:px-24 xl:pb-[150px] 2xl:px-40 3xl:px-[210px]">
          {children}
          <DynamicContact />
        </main>
        <Footer />
      </div>
      <ScrollToTop isShowScrollToTop={showScrollToTop} />
    </div>
  );
};