import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import useLocalSettingsStore from '@/stores/localSettingsStore';
import { SettingsIcon } from 'lucide-react';

export default function EditNavSidebar({ isOpen, onClose }) {
    const { getSetting, setSetting } = useLocalSettingsStore();

    return (
        <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <SheetContent side="left" className="w-50 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">MEMEAIGEN</div>
                    </SheetTitle>
                </SheetHeader>

                <div className="space-y-6">
                    <Dialog>
                        <DialogTrigger asChild>
                            <Button variant="link">
                                <SettingsIcon className="h-6 w-6" /> Settings
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[425px]">
                            <DialogHeader>
                                <DialogTitle>Settings</DialogTitle>
                                <DialogDescription>Change your settings here.</DialogDescription>
                            </DialogHeader>

                            <div className="flex items-center space-x-2">
                                <Checkbox
                                    id="genAlphaSlang"
                                    checked={getSetting('genAlphaSlang')}
                                    onCheckedChange={() => setSetting('genAlphaSlang', !getSetting('genAlphaSlang'))}
                                />
                                <label
                                    htmlFor="genAlphaSlang"
                                    className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                >
                                    Use gen alpha slang
                                </label>
                            </div>

                            <DialogFooter></DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>
            </SheetContent>
        </Sheet>
    );
}