import { useEffect, useState } from 'react';
import { Link } from '@inertiajs/react';
import { Moon, Sun } from 'lucide-react';

import { Separator } from '@radix-ui/react-separator';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';

import { AppSidebar } from '@/components/ui/app-sidebar';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { TooltipContent } from '@/components/ui/tooltip';
import { Toaster } from '@/components/ui/toaster';

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>
                        <BreadcrumbList>
                            <BreadcrumbItem className="hidden lg:block">
                                <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 asChild>
                                    { theme === 'dark' ? (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
                                        <Sun />
                                    </Button>) : (<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>
    );
}