import * as React from 'react'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import CssBaseline from '@mui/material/CssBaseline'
import Divider from '@mui/material/Divider'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemText from '@mui/material/ListItemText'
import MenuIcon from '@mui/icons-material/Menu'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import { Outlet, useNavigate, Link } from 'react-router-dom'
import Button from '@mui/material/Button'
import Avatar from '@mui/material/Avatar'
import logo from '../../Assests/Images/logo.png'
import { getUserId, deleteUserId } from '../../Config'

interface Props {
  window?: () => Window
}

const drawerWidth = 240
const navItems = ['Home', 'About', 'Contact']

export default function DrawerAppBar(props: Props) {
  const navigate = useNavigate()
  const { window } = props
  const [mobileOpen, setMobileOpen] = React.useState(false)

  const handleDrawerToggle = () => {
    setMobileOpen((prevState) => !prevState)
  }

  const handleLogOut = () => {
    deleteUserId()
    navigate('/')
  }

  const handleLogIn = () => {
    navigate('/login')
  }

  const handleRegister = () => {
    navigate('/register')
  }

  const drawer = (
    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
      <Typography variant='h6' sx={{ my: 2 }}>
        MUI
      </Typography>
      <Avatar alt='Remy Sharp' src='/Assests/Images/logo.png' />
      <Divider />
      <List>
        {navItems.map((item) => (
          <ListItem key={item} disablePadding>
            <ListItemButton sx={{ textAlign: 'center' }}>
              <ListItemText primary={item} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  )

  const container = window !== undefined ? () => window().document.body : undefined

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar component='nav' sx={{ backgroundColor: '#ffffff' }}>
        <Toolbar>
          <IconButton
            color='inherit'
            aria-label='open drawer'
            edge='start'
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>
          {/* <Typography
            variant="h6"
            component="div"
            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
          >
            MUI
          </Typography> */}
          <img
            src={logo}
            alt='Description of your image'
            style={{ width: '150px', height: '35px', marginLeft: '30px' }}
          />
          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'end' }}>
            {getUserId() ? (
              <Box sx={{ display: { xs: 'none', sm: 'block' }, mr: 10 }}>
                <Button
                  component={Link}
                  to={'/select'}
                  sx={{ color: '#000000', fontWeight: '700' }}
                >
                  Learn
                </Button>
                <Button component={Link} to={'/'} sx={{ color: '#000000', fontWeight: '700' }}>
                  Dashboad
                </Button>
                <Button
                  onClick={handleLogOut}
                  sx={{
                    color: '#ffffff',
                    fontWeight: '500',
                    backgroundColor: '#7950F1',
                    ml: 5,
                    ':hover': {
                      backgroundColor: '#5a2ce6',
                      color: '#ffffff',
                    },
                  }}
                >
                  Sign Out
                </Button>
              </Box>
            ) : (
              <Box sx={{ display: { xs: 'none', sm: 'block' }, mr: 10 }}>
                <Button
                  onClick={handleLogIn}
                  sx={{
                    color: '#7950F1',
                    fontWeight: '700',
                    fontSize: 16,
                    mr: 2,
                    ':hover': {
                      color: '#5a2ce6',
                    },
                  }}
                >
                  Sign In
                </Button>
                <Button
                  onClick={handleRegister}
                  sx={{
                    color: '#ffffff',
                    fontWeight: '700',
                    backgroundColor: '#7950F1',
                    ':hover': {
                      backgroundColor: '#5a2ce6',
                      color: '#ffffff',
                    },
                  }}
                >
                  Sign Up
                </Button>
              </Box>
            )}
          </Box>
        </Toolbar>
      </AppBar>
      <nav>
        <Drawer
          container={container}
          variant='temporary'
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
          sx={{
            display: { xs: 'block', sm: 'none' },
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
          }}
        >
          {drawer}
        </Drawer>
      </nav>
      <Box
        component='main'
        sx={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          mt: 7.5,
          width: '100%',
        }}
      >
        <Outlet />
      </Box>
    </Box>
  )
}
