import { Button, Menu, MenuItem, Stack, Typography } from "@mui/material";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";

import { useLogout } from "@/contracts/identity";
import { useAudioStore } from "@/features";
import { useIdentityStore } from "@/features/Login/lib/identity.store";
import { useWatcherStore } from "@/modules/watcher/store/watcher.store";

import { useAuthorizedContext } from "../contexts/authorized/useAuthorizedContext";

interface Props {
	isVertical: boolean;
	onChanged?: () => void;
}

export const UserMenu: FC<Props> = () => {
	const { user } = useAuthorizedContext();
	const { mutateAsync: logout } = useLogout();
	const identity = useIdentityStore();
	const setIsPlaying = useAudioStore((x) => x.setIsPlaying);
	const { t } = useTranslation("translation");
	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
	const watcherStore = useWatcherStore();
	const open = Boolean(anchorEl);
	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
		setAnchorEl(event.currentTarget);
	};
	const handleClose = () => {
		setAnchorEl(null);
	};

	async function handleLogout() {
		try {
			await logout();
			identity.logout();
			setIsPlaying(false);
			watcherStore.clearAll();
			handleClose();
		} catch (error) {
			console.error(error);
		}
	}

	return (
		<>
			<Button
				id="basic-button"
				aria-controls={open ? "basic-menu" : undefined}
				aria-haspopup="true"
				aria-expanded={open ? "true" : undefined}
				onClick={handleClick}
				sx={{
					padding: "10px",
					gap: "25px",
					textTransform: "none",
					color: "var(--black-900)",
					border: "1px solid var(--black-200)",
					borderRadius: "10px",
				}}
			>
				<Stack direction="row" spacing="10px" alignItems="center">
					<img
						src="/images/user_profile.svg"
						width="40px"
						height="40px"
						alt="user_profile"
					/>
					<Stack spacing="2px" alignItems="start">
						<Typography
							variant="body1"
							sx={{
								fontSize: "18px",
							}}
						>
							{user.username}
						</Typography>
						<Typography
							variant="body1"
							sx={{
								fontSize: "14px",
							}}
						>
							{user && t(user.role)}
						</Typography>
					</Stack>
				</Stack>

				<img
					src="/images/arrow_down.svg"
					width="24px"
					height="24px"
					alt="arrow_down"
				/>
			</Button>
			<Menu
				id="basic-menu"
				anchorEl={anchorEl}
				open={open}
				onClose={handleClose}
				MenuListProps={{
					"aria-labelledby": "basic-button",
				}}
			>
				{/* <MenuItem onClick={handleClose}>{t("Profile")}</MenuItem> */}
				<MenuItem onClick={handleLogout}>{t("Logout")}</MenuItem>
			</Menu>
		</>

		// <Stack
		// 	direction={isVertical ? "column" : "row"}
		// 	spacing={2}
		// 	alignItems="center"
		// >
		// 	{identity.user ? (
		// 		<>
		// 			<div>{identity.user.username}</div>

		// 			<div>
		// 				<Button
		// 					title={t("Sign-Out")}
		// 					onClick={handleLogout}
		// 					variant="outlined"
		// 				>
		// 					{t("Sign-Out")}
		// 				</Button>
		// 			</div>
		// 		</>
		// 	) : (
		// 		<>
		// 			<div>
		// 				<Button
		// 					title={t("Sign-In")}
		// 					onClick={handleLogin}
		// 					variant="outlined"
		// 				>
		// 					{t("Sign-In")}
		// 				</Button>
		// 			</div>
		// 		</>
		// 	)}
		// </Stack>
	);
};
