import React, { useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import LeftSidebar from "@/components/_App/LeftSidebar";
import TopNavbar from "@/components/_App/TopNavbar";
import Footer from "@/components/_App/Footer";
import ScrollToTop from "./ScrollToTop";
import ControlPanelModal from "./ControlPanelModal";
import AuthRoute from "middlewares/AuthRoute";

const Layout = ({ children }) => {
  const router = useRouter();
  const [active, setActive] = useState(false);

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

  const isAuthenticationPage = [
    "/authentication/sign-in",
    "/authentication/sign-up",
    "/authentication/forgot-password",
    "/authentication/lock-screen",
    "/authentication/confirm-mail",
    "/authentication/logout",
  ].includes(router.pathname);

  const title = isAuthenticationPage ? "CMC - Authentication" : "CMC - Client";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>

      <AuthRoute>
        <div className={`main-wrapper-content ${active ? "active" : ""}`}>
          {!isAuthenticationPage && (
            <>
              <TopNavbar toggleActive={toggleActive} />
              <LeftSidebar toggleActive={toggleActive} />
            </>
          )}

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

          {!isAuthenticationPage && <Footer />}
        </div>

        <ScrollToTop />

        {!isAuthenticationPage && <ControlPanelModal />}
      </AuthRoute>
    </>
  );
};

export default Layout;
