'use client'
import { useGSAP } from "@gsap/react";
import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
import gsap from 'gsap'
export default function CvPage() {
  const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
  const gsapContext = useGsapContext()
  const container = useRef<HTMLDivElement>(null)
  enum Direction {
    Left = 1,
    Up,
    Right,
    Down
  }
  const nextGsapConf = (direction: Direction) => {
    switch (direction) {
      case Direction.Left:
        return { x: -100, opacity: 0, duration: 0.5 }
      case Direction.Up:
        return { y: -100, opacity: 0, duration: 0.5 }
      case Direction.Right:
        return { x: 100, opacity: 0, duration: 0.5 }
      case Direction.Down:
        return { y: 100, opacity: 0, duration: 0.5 }
    }
  }
  useTimeLine(col2Categories)
  useGSAP(() => {
    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
    let dir = Direction.Left;
    items?.forEach(item => {
      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
      if (dir == Direction.Down) {
        dir = Direction.Left
      } else {
        dir = dir + 1
      }
    })
  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
  return (
    <>
      <SidebarProvider ref={container}>
        {sidebarCategories.data &&
          <>
            <SidebarTriggerDisappearsOnMobile />
            <Sidebar className="gsapan ">
              <SidebarContent className="p-2 lg:pt-[3.2rem]">
                {sidebarCategories.data?.map((cat) => {
                  if (cat !== undefined) {
                    return (
                      <CvCategory layout="col" initialData={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.data?.map((cat) => {
                return (
                  <CvCategory layout="row" initialData={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.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
                {col1Categories.data?.map((cat) => {
                  return (
                    <CvCategory layout="col" initialData={cat} key={cat.id} />
                  )
                })}
              </div>
              <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
                {col2Categories.data?.map((cat) => {
                  return (
                    <CvCategory layout="col" initialData={cat} key={cat.id} />
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </SidebarProvider>
    </>
  )
}