"use client";

import React, { useState, ReactNode, useEffect } from "react";
import { usePathname } from "next/navigation";
import LeftSidebarMenu from "@/components/Admin/Layout/LeftSidebarMenu";
import TopNavbar from "./../components/Admin/Layout/TopNavbar/index";
import Footer from "@/components/Layout/Footer";
import ControlPanel from "@/components/Admin/Layout/ControlPanel";
import { useCookies } from 'react-cookie';

interface LayoutProviderProps {
  children: ReactNode;
}

const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
  const [active, setActive] = useState<boolean>(false);
  const pathname = usePathname();
  const [cookies] = useCookies(['lr_usr_tkn']);
  const [isCookieAvailable, setIsCookieAvailable] = useState(false);

  useEffect(() => {
    setIsCookieAvailable(!!cookies.lr_usr_tkn);
  }, [cookies]);

  const toggleActive = () => {
    setActive(!active);
  };

  const isAuthPage = [
    "/login/admin",
  ].includes(pathname);

  return (
    <>
      <div className={`main-wrapper-content ${active ? "active" : ""}`}>
        {!isAuthPage && isCookieAvailable && (
          <>
            <TopNavbar toggleActive={toggleActive} />

            <LeftSidebarMenu toggleActive={toggleActive} />
          </>
        )}

        <div className="main-content">
          {children}

          {!isAuthPage && isCookieAvailable && <Footer />}
        </div>
      </div>

      <div
        style={{
          position: "fixed",
          bottom: "15px",
          right: "15px",
          zIndex: "-5",
          opacity: 0,
          visibility: "hidden",
        }}
      >
        <ControlPanel />
      </div>
    </>
  );
};

export default LayoutProvider;
