import SideBar from "@/ui/component/SideBar";
import { Outlet, useNavigate } from "react-router-dom";
import { SidebarProvider } from "@/components/ui/sidebar";
import Header from "@/ui/component/Header";
import { useAuthStore } from '@/store/authStore';
import { Toaster, type ToasterProps } from "sonner";
import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react";
import { useState } from "react";

export default function Layout() {
  const { authData } = useAuthStore();
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();
  const pathname = location.pathname;

  const goTo = (path: string) => {
    console.log(path);
    console.log(pathname);
    if (path === pathname) return;
    navigate(path);
    setOpen(false);
  }

  return (
    <>
      <Toaster
        position="top-center"
        icons={{
          success: <CircleCheckIcon className="size-4" fill="#15b815" color="white" />,
          error: <OctagonXIcon className="size-4" fill="#f14e4e" color="white" />,
          info: <InfoIcon className="size-4" fill="black" color="white" />,
          warning: <TriangleAlertIcon className="size-4" fill="#ffd500" color="white" />,
          loading: <Loader2Icon className="size-4 animate-spin" fill="white" color="black" />
        }}
      />
      <SidebarProvider
        open={open}
        onOpenChange={setOpen}
        id="root"
      >
        <SideBar goTo={goTo} />
        <div className="flex flex-col w-full h-full">
          { authData ? <Header /> : null}
          <div className="w-full h-full p-2.5">
            <Outlet />
          </div>
        </div>
      </SidebarProvider>
    </>
  );
}