import { useEffect, useRef } from "react";
import { useNextCssRemovalPrevention } from "@madeinhaus/nextjs-page-transition";
import { useRouter } from "next/router";

import AssetsProvider from "@/assets/utils/AssetsProvider";
import Debug from "@/components/debug";
import Footer from "@/components/footer";
import Header from "@/components/header";
import KeyholeAnimation from "@/components/keyhole-animation";
import LandscapeFallback from "@/components/landscape-warning";
import Canvas from "@/components/three-canvas";
import ZoomWarning from "@/components/zoom-warning";
import { FOOTER, HEADER, SOCIALS } from "@/config/data";
import assets from "@/config/data.json";
import { useIsClient, useLenis } from "@/hooks";
import useAndroidKeyboardOverlap from "@/hooks/useAndroidKeyboardOverlap";
import { useStore } from "@/store";
import { type AssetsData } from "@/types";

import styles from "./styles.module.scss";

interface RootLayoutProps {
  children: React.ReactNode;
}

const RootLayout = ({ children }: RootLayoutProps) => {
  const router = useRouter();
  const rootRef = useRef<HTMLDivElement>(null);
  const isClient = useIsClient();

  const isReady = useStore.use.isReady();
  const setIsReady = useStore.use.setIsReady();
  const androidKeyboardOverlap = useStore.use.androidKeyboardOverlap();

  const setProgress = useStore.use.setProgress();

  const threeInstance = useStore.use.three();

  useLenis();

  // https://github.com/vercel/next.js/issues/17464
  useNextCssRemovalPrevention();
  useAndroidKeyboardOverlap();

  useEffect(() => {
    const callBackProgress = (_progress: number) => {
      setProgress(_progress);
    };

    if (threeInstance?.renderer && !isReady) {
      AssetsProvider.loadAssets(
        assets as Array<AssetsData>,
        callBackProgress,
        threeInstance?.renderer,
      ).then(() => {
        setIsReady(true);
      });
    }
  }, [threeInstance, setProgress, isReady, setIsReady]);

  return (
    <div ref={rootRef} className={styles.rootLayout}>
      <KeyholeAnimation key={router.asPath} startAnimation={isReady} />
      <Canvas />
      <Header navItems={HEADER} />
      <main className={styles.main}>{children}</main>
      {!androidKeyboardOverlap && (
        <Footer navItems={FOOTER} socialItems={SOCIALS} />
      )}
      <ZoomWarning />
      {!androidKeyboardOverlap && <LandscapeFallback />}
      {isClient && <Debug />}
    </div>
  );
};

export default RootLayout;