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 MenuList from './MenuList';
import { makeStyles, Typography } from '@material-ui/core'

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

interface IToolBar {
  setSelectedIndex: (selectedIndex: number | null) => void,
  handleClick:() => void
}

const ToolBar = ({setSelectedIndex,handleClick}:IToolBar) => {
  const classes = useStyles()

  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={() => setSelectedIndex(4)} style={{ marginLeft: 'auto' }}  aria-label="delete" size="medium">
        <EditIcon  fontSize='medium' /> 
      </IconButton>
      <MenuList/>   
    </Stack>
    )
}

export default ToolBar