"use client";
import Aos from "aos";
import { useEffect, useState } from "react";
import BackToTop from "../elements/BackToTop";
import DataBg from "../elements/DataBg";
import Breadcrumb from "./Breadcrumb";
import PageHead from "./PageHead";
import Footer1 from "./footer/Footer1";
import Footer2 from "./footer/Footer2";
import Footer3 from "./footer/Footer3";
import Footer4 from "./footer/Footer4";
import Footer5 from "./footer/Footer5";
import Header1 from "./header/Header1";
import Header2 from "./header/Header2";
import Header3 from "./header/Header3";
import Header4 from "./header/Header4";
import Header5 from "./header/Header5";
import Header6 from "./header/Header6";
import Footer7 from "./footer/Footer7";
import Footer6 from "./footer/Footer6";
import Script from "next/script";

export const metadata = {
  title: "RankRunners - SEO, Web Design & Digital Marketing Agency",
  openGraph: {
    images: [
      {
        url: "../public/assets/img/opengraph-image.png",
        width: 1500,
        height: 786,
        alt: "OpenGraph Image",
      },
    ],
  },
};

export default function Layout({
  headerStyle,
  footerStyle,
  headTitle,
  breadcrumbTitle,
  children,
  transparent,
}) {
  const [scroll, setScroll] = useState(0);
  const [isMobileMenu, setMobileMenu] = useState(false);
  const handleMobileMenu = () => {
    setMobileMenu(!isMobileMenu);
    !isMobileMenu
      ? document.body.classList.add("mobile-menu-visible")
      : document.body.classList.remove("mobile-menu-visible");
  };
  // Search Menu
  const [isSearch, setSearch] = useState(false);
  const handleSearch = () => setSearch(!isSearch);
  // Moblile Menu
  const [isOffcanvus, setOffcanvus] = useState(false);
  const handleOffcanvus = () => setOffcanvus(!isOffcanvus);

  useEffect(() => {
    const WOW = require("wowjs");
    window.wow = new WOW.WOW({
      live: false,
    });
    window.wow.init();
    Aos.init();

    document.addEventListener("scroll", () => {
      const scrollCheck = window.scrollY > 100;
      if (scrollCheck !== scroll) {
        setScroll(scrollCheck);
      }
    });
  }, []);
  return (
    <>
      <PageHead headTitle={headTitle} />
      <Script
        strategy="afterInteractive"
        src="https://www.googletagmanager.com/gtag/js?id=G-3HXP950DQQ"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', 'G-3HXP950DQQ');
                `}
      </Script>
      <DataBg />

      {!headerStyle && (
        <Header1
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
          transparent={transparent}
        />
      )}
      {headerStyle == 1 ? (
        <Header1
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
          transparent={transparent}
        />
      ) : null}
      {headerStyle == 2 ? (
        <Header2
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
        />
      ) : null}
      {headerStyle == 3 ? (
        <Header3
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
        />
      ) : null}
      {headerStyle == 4 ? (
        <Header4
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
          transparent={transparent}
        />
      ) : null}
      {headerStyle == 5 ? (
        <Header5
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          handleOffcanvus={handleOffcanvus}
        />
      ) : null}
      {headerStyle == 6 ? (
        <Header6
          scroll={scroll}
          isMobileMenu={isMobileMenu}
          handleMobileMenu={handleMobileMenu}
          isSearch={isSearch}
          handleSearch={handleSearch}
          isOffcanvus={isOffcanvus}
          transparent={transparent}
          handleOffcanvus={handleOffcanvus}
        />
      ) : null}

      <main className="fix">
        {breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}

        {children}
      </main>

      {!footerStyle && <Footer1 />}
      {footerStyle == 1 ? <Footer1 /> : null}
      {footerStyle == 2 ? <Footer2 /> : null}
      {footerStyle == 3 ? <Footer3 /> : null}
      {footerStyle == 4 ? <Footer4 /> : null}
      {footerStyle == 5 ? <Footer5 /> : null}
      {footerStyle == 6 ? <Footer6 /> : null}
      {footerStyle == 7 ? <Footer7 /> : null}

      <BackToTop />
    </>
  );
}