import classNames from "classnames";
import React, { useEffect, useLayoutEffect } from "react";
import Scrollbar from "react-scrollbars-custom";
import { WithRouteProps } from "routes";
import { withRouteParams } from "routes/withRoute";
import { useUIViewModel } from "ui/controller/uiViewModel";
import { useUIStore } from "ui/data/uiSlice";
import DrawerController from "ui/views/DrawerController";
import Header from "./parts/Header";
import SideNav from "./parts/sidenav/SideNav";

type Props = {
  title?: string;
  withOutlet?: boolean;
  children: React.ReactElement<WithRouteProps>;
} & WithRouteProps;

const Page = ({ title, withOutlet, children, activePath }: Props) => {
  const uiStore = useUIStore();
  const { isDrawerCollapsed, initDrawer } = useUIViewModel(uiStore);

  useLayoutEffect(() => {
    initDrawer();
  }, [initDrawer]);

  return (
    <div className="grid grid-flow-col grid-rows-page grid-cols-layout max-h-screen overflow-hidden transition-all">
      <header className="col-span-2">
        <Header />
      </header>
      <aside
        className={classNames(
          "group overflow-hidden space-y-1 pt-6 bg-aside border-serv-800 transition-[width]",
          isDrawerCollapsed ? "w-24" : "1.5xl:w-80 2xl:w-96"
        )}
      >
        <Scrollbar>
          <div className="px-6 py-1">
            <SideNav collapsed={isDrawerCollapsed} />
          </div>
        </Scrollbar>
      </aside>
      <main className="relative rounded-lg m-2 pl-24 bg-main shadow-lg shadow-serv-900/20">
        <div className="absolute -left-5 top-6">
          <DrawerController />
        </div>
        <Scrollbar>
          <div className="px-8 pt-20">{children}</div>
        </Scrollbar>
      </main>
    </div>
  );
};

export default withRouteParams(Page);