'use client'
import { Sidebar, SidebarContent, SidebarProvider } from "~/components/ui/sidebar";
import type { RouterOutputs } from "~/server/routers/_app"
import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
import CvCategory from "./CvCategory";
import { useTimeLine } from "~/app/_providers/GsapProvicer";
export default function CvPage(props: { cv: RouterOutputs['categoryv2']['listAllWithEntries'] }) {
  useTimeLine(props.cv)
  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
    props.cv?.filter((c) => c.layoutPosition === pos) ?? []
  const sidebarCategories = byPosition("sidebar")
  const headerCategories = byPosition("header")
  const col1Categories = byPosition("col1")
  const col2Categories = byPosition("col2")
  return (
    <>
      <SidebarProvider>
        {sidebarCategories.length > 0 &&
          <>
            <SidebarTriggerDisappearsOnMobile />
            <Sidebar>
              <SidebarContent className="p-2 lg:pt-[3.2rem]">
                {sidebarCategories.map((cat, i) => (
                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
                ))}
              </SidebarContent>
            </Sidebar>
          </>
        }
        <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
          <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
            <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
              {headerCategories.map((cat, i) => (
                <CvCategory layout="row" position={i} category={cat} key={cat.id} />
              ))}
            </div>
            <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
                {col1Categories.map((cat, i) => (
                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
                ))}
              </div>
              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
                {col2Categories.map((cat, i) => (
                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </SidebarProvider>
    </>
  )
}