import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import { makeStyles } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import { useState } from 'react';

import MenuList from './MenuList'
import DeleteModal from './DeleteModal';
import { actionIsOpen } from '../../../../../redux/control/action'

const useStyles = makeStyles({
  container: {
    marginLeft:20
  }, 
})

const Buttons = () => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const [modal,setModal] = useState<boolean>(false)

  return (
    <Stack className={classes.container} direction="row" spacing={1}>
      <IconButton onClick={() => dispatch(actionIsOpen('search'))} aria-label="delete" size="medium">
        <SearchIcon fontSize='medium'/>
      </IconButton>
      <MenuList setModal={setModal}/>
       {modal&&<DeleteModal setModal={setModal}/>}      
    </Stack>
  );
}

export default Buttons