import { Settings } from "lucide-react";
import { useNavigate } from "react-router";
import { ModalType, useModalStore } from "~/stores/modal-store";
import { useTokenStore } from "~/stores/token-store";
import { Button } from "../ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "../ui/dropdown-menu";

export function SettingsButton() {
    const setToken = useTokenStore((state) => state.setToken);
    const onOpen = useModalStore((state) => state.onOpen);
    const navigate = useNavigate();

    const onUpdateProfile = () => {
        onOpen(ModalType.UPDATE_PROFILE);
    };

    const onOpenSettings = () => {
        navigate("/app/settings");
    };

    const onLogout = () => {
        setToken(undefined);
        window.location.reload();
    };

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon">
                    <Settings className="size-5 m-1.5" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuItem onClick={onOpenSettings}>Settings</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive" onClick={onLogout}>
                    Logout
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}