import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { AppSidebar } from '@/components/ui/app-sidebar.jsx';
import { Separator } from "@radix-ui/react-separator";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from "@/components/ui/breadcrumb";
import { Toaster } from '@/components/ui/toaster';
import { Button } from '@/components/ui/button';
import { Moon, Settings, Sun } from 'lucide-react';
import { Link, usePage } from '@inertiajs/react';
import { useEffect, useState } from "react";
import { Tooltip, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
import { TooltipContent } from "@/components/ui/tooltip.jsx";

export default function AppLayout({ auth, header, children, toolbar }) {

    const getTheme = () => {
        if (localStorage.getItem('theme')) {
            return localStorage.getItem('theme');
        }

        return 'light';
    }

    const themeButtonOnclickHandler = (theme) => {
        // Set local storage
        localStorage.setItem('theme', theme);
        setTheme(theme);

        const root = window.document.documentElement;
        root.classList.remove("light", "dark");
        root.classList.add(theme);
    }

    const [theme, setTheme] = useState(getTheme());

    useEffect(() => {
        getTheme();
        setTheme(theme);
    }, []);

    return (
        <SidebarProvider>
            <AppSidebar auth={ auth } />
            <SidebarInset>
                <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                    <SidebarTrigger className="-ml-1" />
                    <Separator orientation="vertical" className="mr-2 h-4" />
                    <Breadcrumb className="hidden lg:block">
                        <BreadcrumbList>
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href={ route('comics.index') }>Home</Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            { header }
                        </BreadcrumbList>
                    </Breadcrumb>
                    <span className="flex gap-1 ml-auto justify-center content-center">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger>
                                    { theme === 'dark' && (
                                        <Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
                                            <Sun />
                                        </Button>
                                    ) }
                                    { theme === 'light' && (
                                        <Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
                                            <Moon />
                                        </Button>
                                    ) }
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>Toggle day / night mode</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                        { toolbar }
                    </span>
                </header>
                <div className="w-full pt-3">
                    { children }
                    <Toaster />
                </div>
            </SidebarInset>
        </SidebarProvider>
    );
}