"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 />
        </>
    );
}