import {
  IconButton,
  Button,
  Badge,
  SwipeableDrawer,
  Box,
  List,
  ListItem,
} from '@mui/material';
import { makeStyles } from '@mui/styles';
import MenuIcon from '@mui/icons-material/Menu';
import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
import { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { CATEGORIES } from '../../common/constants';
import AuthContext from '../../context/AuthContext';

const useStyles = makeStyles({
  root: {
    display: 'flex',
  },
  searchbar: {
    width: '18em',
    fontSize: '13px',
    fontWeight: 600,
    color: '#717171',
  },
  count: {
    color: '#29C1BC',
    fontSize: '10px',
    fontWeight: 'bolder',
  },
  link: {
    fontSize: '12px',
    fontFamily: 'Noto Sans KR',
    textDecoration: 'none',
    color: '#717171',
    fontWeight: 500,
    padding: '0px 10px',
    border: 'solid black',
  },
  categories: { textAlign: 'center', color: 'gray', margin: '0 0 1em 0' },
  greeting: { textAlign: 'center', fontSize: '2em', padding: '1em 2em' },
});

const Searchbar = () => {
  const classes = useStyles();
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);
  const { logout, user, cartItems } = useContext(AuthContext);

  const toggleDrawer = (open) => (event) => {
    if (
      event &&
      event.type === 'keydown' &&
      (event.key === 'Tab' || event.key === 'Shift')
    ) {
      return;
    }
    setIsOpen(open);
  };

  const list = () => (
    <Box
      sx={{ width: 250 }}
      role="presentation"
      onClick={toggleDrawer(false)}
      onKeyDown={toggleDrawer(false)}
    >
      {user ? (
        <p className={classes.greeting}>Hello, {user.username}</p>
      ) : (
        <div
          style={{
            display: 'flex',
          }}
        >
          <Button onClick={() => navigate('/login')}>
            {'Please log in >'}
          </Button>
        </div>
      )}
      <p className={classes.categories}>Categories</p>
      <List>
        {CATEGORIES.map((text, index) => (
          <ListItem key={text} disablePadding>
            <Button>{text}</Button>
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <div className={classes.root}>
      {/* <form>
        <Input
          name="search"
          placeholder="Search for keywords"
          className={classes.searchbar}
        />
        <IconButton type="submit">
          <SearchIcon />
        </IconButton>
  </form> */}
      <IconButton onClick={() => navigate('/cart')}>
        <Badge badgeContent={cartItems.length} color="primary">
          <ShoppingCartOutlinedIcon />
        </Badge>
      </IconButton>
      {user ? (
        <Button onClick={() => logout()}>Logout</Button>
      ) : (
        <Button onClick={() => navigate('/login')}>Login</Button>
      )}

      <IconButton onClick={toggleDrawer(true)}>
        <MenuIcon />
      </IconButton>
      <SwipeableDrawer
        anchor="right"
        open={isOpen}
        onClose={toggleDrawer(false)}
        onOpen={toggleDrawer(true)}
      >
        {list()}
      </SwipeableDrawer>
    </div>
  );
};

export default Searchbar;