import { usePage } from '@inertiajs/react';

import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { useMitt } from '@/plugins/MittContext';
import useLocalSettingsStore from '@/stores/localSettingsStore';
import { Link } from '@inertiajs/react';

export default function EditNavSidebar({ isOpen, onClose }) {
    const { auth } = usePage().props;

    const emitter = useMitt();

    const { getSetting, setSetting } = useLocalSettingsStore();

    const openAuth = (isLogin) => {
        if (isLogin) {
            emitter.emit('login');
        } else {
            emitter.emit('join');
        }
    };

    return (
        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <SheetContent side="left" className="w-[220px] overflow-y-auto">
                <SheetHeader>
                    <SheetTitle className="flex items-center gap-3">
                        <div className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEFAST</div>
                    </SheetTitle>
                </SheetHeader>

                <div className="space-y-3">
                    <div className="grid px-2">
                        {!auth.user && (
                            <Button
                                onClick={() => {
                                    openAuth(false);
                                }}
                                variant="outline"
                            >
                                Sign Up
                            </Button>
                        )}
                        {!auth.user && (
                            <Button
                                onClick={() => {
                                    openAuth(true);
                                }}
                                variant="link"
                            >
                                Login
                            </Button>
                        )}
                    </div>

                    <div className="space-y-3 px-2">
                        <Link className="text-primary block w-full text-sm underline-offset-4 hover:underline" href={route('home')} as="button">
                            Home
                        </Link>
                        {auth.user && (
                            <Link
                                className="text-primary block w-full text-sm underline-offset-4 hover:underline"
                                method="post"
                                href={route('logout')}
                                as="button"
                            >
                                Log out
                            </Link>
                        )}
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );
}