"use client";

import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import Context from "@/context/Context";
import MobileMenu from "@/components/modals/MobileMenu";

import ScrollTop from "@/components/common/ScrollTop";
import Header4 from "@/components/headers/Header4";
import Footer1 from "@/components/footers/Footer1";

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import CookieBanner from "@/components/CookieBanner";

export default function ClientShell({ children }) {
	const pathname = usePathname();

	useEffect(() => {
		if (!pathname.includes("/admin")) {
			const handleScroll = () => {
				const header = document.querySelector("header");
				if (window.scrollY > 100) {
					header.classList.add("header-bg");
				} else {
					header.classList.remove("header-bg");
				}
			};

			window.addEventListener("scroll", handleScroll);

			return () => {
				window.removeEventListener("scroll", handleScroll);
			};
		}
	}, []);

	const [scrollDirection, setScrollDirection] = useState("down");

	useEffect(() => {
		if (!pathname.includes("/admin")) {
			setScrollDirection("up");
			const handleScroll = () => {
				const currentScrollY = window.scrollY;

				if (currentScrollY > 250) {
					if (currentScrollY > lastScrollY.current) {
						setScrollDirection("down");
					} else {
						setScrollDirection("up");
					}
				} else {
					setScrollDirection("down");
				}

				lastScrollY.current = currentScrollY;
			};

			const lastScrollY = { current: window.scrollY };

			window.addEventListener("scroll", handleScroll);

			return () => {
				window.removeEventListener("scroll", handleScroll);
			};
		}
	}, [pathname]);

	useEffect(() => {
		const bootstrap = require("bootstrap");
		const modalElements = document.querySelectorAll(".modal.show");
		modalElements.forEach((modal) => {
			const modalInstance = bootstrap.Modal.getInstance(modal);
			if (modalInstance) {
				modalInstance.hide();
			}
		});

		// Close any open offcanvas
		const offcanvasElements = document.querySelectorAll(".offcanvas.show");
		offcanvasElements.forEach((offcanvas) => {
			const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvas);
			if (offcanvasInstance) {
				offcanvasInstance.hide();
			}
		});
	}, [pathname]);

	useEffect(() => {
		if (!pathname.includes("/admin")) {
			const header = document.querySelector("header");
			if (header) {
				if (scrollDirection == "down") {
					header.style.top = "0px";
				} else {
					header.style.top = "-185px";
				}
			}
		}
	}, [scrollDirection]);

	useEffect(() => {
		const { WOW } = require("wowjs");
		const wow = new WOW({
			mobile: false,
			live: false,
		});
		wow.init();
	}, [pathname]);

	useEffect(() => {
		document.documentElement.dir = "ltr";
		const preloader = document.getElementById("preloader");
		if (preloader) preloader.classList.add("disabled");
	}, []);

	return (
		<>
			<div className='preload preload-container' id='preloader'>
				<div className='preload-logo'>
					<div className='spinner'></div>
				</div>
			</div>{" "}
			<Context>
				{!pathname.includes("/admin") && <Header4 />}
				<ToastContainer />
				<div id='wrapper'>
                         {children}
                    </div>
				<CookieBanner />
				{!pathname.includes("/admin") && <MobileMenu />}

				{!pathname.includes("/admin") && <Footer1 />}
			</Context>
			<ScrollTop />
		</>
	);
}
