import { AppBar, Button, IconButton, Toolbar, Typography, useMediaQuery, Theme, useTheme } from '@mui/material';
import React, { useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AuthContext } from '../../contexts/AuthContext';
import { AccountContext } from '../../contexts/AccountContext';
import { applyAccessToken, axiosInstance } from '../../../axiosApi';
import { clearTokens, getRefreshToken } from '../../auth/tokenStorage';
import MenuIcon from '@mui/icons-material/Menu';
import { AccountBox, Dashboard, Feedback, Logout } from '@mui/icons-material';
import Box from '@mui/material/Box';
import hesychiaMark from '../../assets/brand/hesychia-mark.png';

type HeaderProps = {
  drawerWidth?: number;
  handleDrawerToggle?: () => void
}

const Header = ({drawerWidth=0, handleDrawerToggle}: HeaderProps): JSX.Element => {
  const {authenticated, setAuthentication} = useContext(AuthContext);
  const { account, setAccount } = useContext(AccountContext);
    const navigate = useNavigate();

  const handleSignOut = async () => {
    try{
      await axiosInstance.post('blacklist/',{
        'refresh_token': getRefreshToken()
      })
      await clearTokens();
      applyAccessToken(null);
      setAuthentication(false)
      setAccount(undefined);
      navigate('/signin/')
    }finally{
      
    }
  }

  const handleDashboardClick = async () => {
    navigate('/')
  }

  const handleAccountClick = async () => {
    navigate('/account/')
  }

  const handleFeedbackClick = async () => {
    navigate('/feedback/')
  }
  const theme = useTheme()
  const isLargeScreen = useMediaQuery(theme.breakpoints.up('md'))
  return (
    <AppBar position='fixed'
      sx={{
        width: { sm: `calc(100% - ${drawerWidth}px)` },
        ml: { sm: `${drawerWidth}px` },
      }}
    >
        <Toolbar className='bg-gradient-dark shadow-dark'>
          { handleDrawerToggle &&
            <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}>
              <MenuIcon />
            </IconButton>
          }
          {isLargeScreen ? (
            <>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1 }}>
              <Box component="img" src={hesychiaMark} alt="" sx={{ width: 28, height: 28, borderRadius: '50%' }} />
              <Typography variant="h6" className='text-white font-weight-bold'>
                Hesychia
              </Typography>
            </Box>
          <Button color="inherit" onClick={handleDashboardClick}>
          Dashboard</Button>
          
        <Button color="inherit" onClick={handleAccountClick}>Account</Button>
        
        <Button color="inherit" onClick={handleFeedbackClick}>Feedback</Button>
        
        <Button color="inherit" onClick={handleSignOut}>Sign Out</Button>
        </>
          ) : (
            <>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1 }}>
              <Box component="img" src={hesychiaMark} alt="" sx={{ width: 28, height: 28, borderRadius: '50%' }} />
              <Typography variant="h6" className='text-white font-weight-bold'>
                Hesychia
              </Typography>
            </Box>
          <IconButton color="inherit" onClick={handleDashboardClick}>
          <Dashboard />
        </IconButton>
        <IconButton color="inherit" onClick={handleAccountClick}>
            <AccountBox />
          </IconButton>
          <IconButton color="inherit" onClick={handleFeedbackClick}>
            <Feedback />
          </IconButton>
          <IconButton color="inherit" onClick={handleSignOut}>
            <Logout />
          </IconButton>
        </>

          )}
          
          
          
        </Toolbar>
      </AppBar>

  );
};

export default Header;