"use client";

import Router from "@/components/Router";
import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar";
import { useWorkspace } from "@/hooks/workspace";
import { ChevronRight } from "lucide-react";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { Route } from "@/lib/types";
import { Button } from "@/components/ui/button";
import {
  createDefaultWorkspace,
  saveWorkspaceToLocalStorage,
} from "@/lib/workspace";

export default function Workspace() {
  const [currentWorkspace, setCurrentWorkspace] = useState<string>();

  const { workspace, loadWorkspace } = useWorkspace();

  const [route, setRoute] = useState<Route>({});

  useEffect(() => {
    setCurrentWorkspace(Cookies.get("workspace"));
  }, []);

  useEffect(() => {
    loadWorkspace(currentWorkspace);
    if (currentWorkspace) Cookies.set("workspace", currentWorkspace);
    else Cookies.remove("workspace");
  }, [currentWorkspace]);

  return workspace ? (
    <AppSidebar workspace={workspace} setRoute={setRoute}>
      <SidebarTrigger className="w-full px-4">
        <div className="px-4">
          <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
            {workspace.name}
            <ChevronRight className="h-5" />
            {workspace.entities[route.entity || ""]?.name}
          </header>
        </div>
      </SidebarTrigger>

      <Router workspace={workspace} />
    </AppSidebar>
  ) : (
    <main
      className="flex h-svh items-center justify-center"
      onClick={() => {
        const w = createDefaultWorkspace();
        saveWorkspaceToLocalStorage(w);
        setCurrentWorkspace(w.id);
      }}
    >
      <Button>Create a new workspace</Button>
    </main>
  );
}