import { useCustomDialog, useGetProfile } from "@/lib/hooks";
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/ui";
import { t } from "i18next";
import { CircleUserIcon, LogOutIcon, SettingsIcon } from "lucide-react";
import { SyntheticEvent, useState } from "react";
import { useNavigate } from "react-router-dom";

export const UserButton = () => {
  const [userMenuOpened, setUserMenuOpened] = useState(false);
  const navigate = useNavigate();

  const { openDialog: openLogoutDialog, DialogComponent: LogoutDialog } = useCustomDialog({
    title: t("main_menu.logout_dialog.title"),
    description: t("main_menu.logout_dialog.description"),
    confirmLabel: t("main_menu.logout_dialog.confirm_label"),
    cancelLabel: t("main_menu.logout_dialog.cancel_label"),
    onConfirm: () => {
      navigate("/logout");
    },
  });

  const { data, status } = useGetProfile();

  const openUserMenu = (event: SyntheticEvent) => {
    event.preventDefault();
    setUserMenuOpened(true);
  };

  return (
    <>
      {status === "success" && (
        <div className='grid gap-1 text-right'>
          <p className='text-xs font-medium leading-none'>{data?.name}</p>
          <p className='text-xs text-muted-foreground'>{data?.email}</p>
        </div>
      )}
      <DropdownMenu open={userMenuOpened} onOpenChange={setUserMenuOpened}>
        <DropdownMenuTrigger asChild>
          <Button
            variant='outline'
            size='icon'
            className='overflow-hidden rounded-full'
            onClick={openUserMenu}
          >
            <CircleUserIcon className='w-5 h-5 accent-current' />
            <span className='sr-only'>{t("main_menu.user.user_menu")}</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align='end' className='w-56'>
          <DropdownMenuLabel>{t("main_menu.user.my_account")}</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            {/*<DropdownMenuItem>
              <UserIcon className='w-4 h-4 mr-2' />
              <span>{t("main_menu.user.profile")}</span>
              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
            </DropdownMenuItem>*/}
            <DropdownMenuItem onSelect={() => navigate("/settings")}>
              <SettingsIcon className='w-4 h-4 mr-2' />
              <span>{t("main_menu.user.settings")}</span>
            </DropdownMenuItem>
            {/*<DropdownMenuItem>
              <MessageCircleQuestionIcon className='w-4 h-4 mr-2' />
              <span>{t("main_menu.user.support")}</span>
            </DropdownMenuItem>*/}
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem onSelect={() => openLogoutDialog()}>
            <LogOutIcon className='w-4 h-4 mr-2' />
            <span>{t("main_menu.user.logout")}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
        {LogoutDialog}
      </DropdownMenu>
    </>
  );
};
