front-hub/src/components/NavbarSite/NavbarPanel.tsx

import { Link, useNavigate } from "react-router-dom"
import {
	Box,
	IconButton,
	Typography,
	useTheme,
	useMediaQuery,
} from "@mui/material"
import LogoutIcon from "../icons/LogoutIcon"
import Drawers from "../Drawers"
import { logout } from "@root/api/auth"
import { enqueueSnackbar } from "notistack"
import { clearUserData, useUserStore } from "@root/stores/user"
import { AvatarButton, clearAuthToken } from "@frontend/kitui"
import { clearCustomTariffs } from "@root/stores/customTariffs"
import { clearTickets } from "@root/stores/tickets"

import { currencyFormatter } from "@root/utils/currencyFormatter"

import walletIcon from "@root/assets/Icons/wallet_icon.svg"

export const NavbarPanel = () => {
	const navigate = useNavigate()
	const theme = useTheme()
	const isTablet = useMediaQuery(theme.breakpoints.down(1000))
	const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0
	const initials = useUserStore((state) => state.initials)

	async function handleLogoutClick() {
		const [_, logoutError] = await logout()

		if (logoutError) {
			return enqueueSnackbar(logoutError)
		}

		clearAuthToken()
		clearUserData()
		clearCustomTariffs()
		clearTickets()
		navigate("/")
	}

	return (
		<Box sx={{ display: "flex", ml: "auto" }}>
			<Drawers />
			<IconButton
				sx={{
					display: "flex",
					alignItems: "center",
					ml: isTablet ? "10px" : "20px",
					bgcolor: "#F2F3F7",
					borderRadius: "6px",
					height: "36px",
					width: "36px",
				}}
				onClick={() => navigate("/wallet")}
			>
				<img src={walletIcon} alt="wallet" />
			</IconButton>
			<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
				<Typography
					sx={{
						fontSize: "12px",
						lineHeight: "14px",
						color: theme.palette.gray.dark,
					}}
				>
          Мой баланс
				</Typography>
				<Typography variant="body2" color={theme.palette.purple.main}>
					{currencyFormatter.format(cash / 100)}
				</Typography>
			</Box>
			<AvatarButton component={Link} to="/settings" sx={{ ml: "27px" }}>
				{initials}
			</AvatarButton>
			<IconButton
				onClick={handleLogoutClick}
				sx={{
					ml: "20px",
					bgcolor: "#F2F3F7",
					borderRadius: "6px",
					height: "36px",
					width: "36px",
				}}
			>
				<LogoutIcon />
			</IconButton>
		</Box>
	)
}