import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import EditIcon from '@mui/icons-material/Edit';
import { makeStyles, Typography } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import MenuList from './MenuList';
import { actionLeftIsOpen } from '../../../../../redux/control/action';

const useStyles = makeStyles({
  container: {
    width: '100%',
    height: '7vh',
    padding:10,
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  iconArrow: {
    '&:hover': {
      transform: 'rotate(360deg)',
      transition: 'all 250ms ease-out ',
    }
  },
})

interface IToolBar {
  handleClick:() => void
}

const ToolBar = ({handleClick}:IToolBar) => {
  const classes = useStyles()
  const dispatch = useDispatch()

  return (
    <Stack className={classes.container} direction="row" spacing={21}>
      <IconButton onClick={handleClick}  aria-label="delete" size="medium">
        <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
      </IconButton>
      <Typography style={{ marginLeft: 20, color: '#474747' }} variant="h6" color="initial">Settings</Typography>
      <IconButton onClick={() => dispatch(actionLeftIsOpen('edit'))} style={{ marginLeft: 'auto' }} aria-label="delete" size="medium">
        <EditIcon  fontSize='medium' /> 
      </IconButton>
      <MenuList/>   
    </Stack>
    )
}

export default ToolBar