import { Trans, useLingui } from "@lingui/react/macro";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@rakazo/ui-web";
import { Gauge, LogOut, Settings } from "lucide-react";

/** The account button at the foot of the sidebar and its menu. */
export function UserMenu({
  open,
  onOpenChange,
  initials,
  userName,
  onOpenSettings,
  onOpenUsage,
  onLogOut,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initials: string;
  userName: string;
  onOpenSettings: () => void;
  onOpenUsage: () => void;
  onLogOut: () => void;
}) {
  const { t } = useLingui();
  return (
    <Popover open={open} onOpenChange={onOpenChange}>
      <PopoverTrigger
        data-testid="user-menu-trigger"
        className="flex items-center gap-[11px] px-[18px] py-3.5"
      >
        <span className="grid size-control-lg place-items-center rounded-full bg-accent text-ui-body-sm text-foreground/75">
          {initials}
        </span>
        <span className="text-ui-body-sm text-foreground/90">{userName}</span>
      </PopoverTrigger>
      {open ? (
        <PopoverContent
          side="top"
          align="start"
          className="w-[calc(316px-1.5rem)] max-w-[calc(100vw-3rem)] gap-0 p-1 data-closed:animate-none"
        >
          <Button
            variant="ghost"
            className="w-full justify-start font-normal"
            aria-label={t`Settings`}
            onClick={() => {
              onOpenChange(false);
              onOpenSettings();
            }}
          >
            <Settings className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Settings</Trans>
          </Button>
          <Button
            variant="ghost"
            className="w-full justify-start font-normal"
            aria-label={t`Usage`}
            onClick={() => {
              onOpenChange(false);
              onOpenUsage();
            }}
          >
            <Gauge className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Usage</Trans>
          </Button>
          <Button variant="ghost" className="w-full justify-start font-normal" onClick={onLogOut}>
            <LogOut className="text-muted-foreground" strokeWidth={1.75} />
            <Trans>Log out</Trans>
          </Button>
        </PopoverContent>
      ) : null}
    </Popover>
  );
}