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

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

export const Toolbar: React.FC<ToolbarProps> = ({
  sideNavOpen,
  setSideNavOpen,
  isMobile,
  user,
  loading,
}) => {
  return (
    <MuiToolbar
      sx={{
        height: (t) => t.spacing(isMobile ? 8 : 10.5),
        px: isMobile ? 3 : 2,
        borderBottom: (t) => `1px solid ${t.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>
          <Icon Component={Menu} variant="Bold" />
        </IconButton>
      </Box>
    </MuiToolbar>
  );
};