import { Avatar, Box, IconButton, Toolbar as MuiToolbar } from '@mui/material';
import { Icon } from '@rkheftan/harmony-ui';
import { HambergerMenu, Menu } from 'iconsax-react';
import { useState, type Dispatch, type SetStateAction } from 'react';
import type { UserInfo } from '@/contexts/AuthContext';
import Logo from '../Logo';
import ProductsMenu from './ProductsMenu';

interface ToolbarProps {
  sideNavOpen: boolean;
  setSideNavOpen: Dispatch<SetStateAction<boolean>>;
  isMobile: boolean;
  user: UserInfo;
}

export const Toolbar: React.FC<ToolbarProps> = ({
  sideNavOpen,
  setSideNavOpen,
  isMobile,
  user,
}) => {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <MuiToolbar
      sx={{
        height: (t) => t.spacing(isMobile ? 8 : 10.5),
        bgcolor: 'background.paper',
        px: isMobile ? 3 : 2,
        borderBottom: `1px solid var(--mui-palette-divider)`,
        boxSizing: 'content-box',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <Box
        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 2 }}
      >
        {isMobile && (
          <IconButton
            sx={{
              backgroundColor: sideNavOpen ? 'primary.light' : undefined,
              color: sideNavOpen ? 'primary.main' : undefined,
              '&:hover': {
                backgroundColor: sideNavOpen ? 'primary.light' : undefined,
              },
            }}
            onClick={() => setSideNavOpen(!sideNavOpen)}
          >
            <Icon Component={HambergerMenu} />
          </IconButton>
        )}
        <Logo />
      </Box>
      <Box
        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
      >
        {isMobile && (
          <Avatar
            sx={{ width: 32, height: 32, fontSize: '14px' }}
            src={user.picture}
          >
            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
          </Avatar>
        )}
        <IconButton color="primary" onClick={handleClick}>
          <Icon Component={Menu} variant="Bold" />
        </IconButton>
      </Box>
      <ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
    </MuiToolbar>
  );
};