import InputBase from '@mui/material/InputBase';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import CloseIcon from '@mui/icons-material/Close';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import { styled } from '@mui/material/styles';
import { makeStyles } from '@material-ui/core'
import { useDispatch,useSelector } from "react-redux";

import { actionIsOpen } from '../../../../../../../redux/control/action'
import { getMessages } from '../../../../../../../redux/messages/selector'
import StaticDatePicker from "./StaticDatePicker";

const SearchBar = styled('div')(({ theme }:any) => ({
  position: 'relative',
  borderRadius: '20px',
  backgroundColor: '#f1f0f0', 
  marginLeft: 0,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(1),
    width: 'auto',
  },
}));

const SearchIconWrapper = styled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
    color: 'inherit',
  '& .MuiInputBase-input': { 
    fontWeight: 500,
    borderRadius: '20px',
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '35ch',
      '&:focus': {
        outline: '2px solid  #2184f7',
        color: '#2184f7'
      },
    },
  },
}));

const useStyles = makeStyles({
  container: {
    paddingLeft: 10,
    paddingBottom:3
  },
  searchBar: {
  '&:hover': {
    backgroundColor: '#f5f5f5',
    color:'#2184f7',
  },    
  }
})

interface ISearch {
  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
  value: string,
  setDate: React.Dispatch<any>,
  date:any,
}

const Search = ({handleSearch,value,setDate,date}:ISearch) => {
  const dispatch = useDispatch()
  const classes = useStyles()
  const messages = useSelector(getMessages)
  const disabled = messages.length > 0 ? false : true
  const handleOnOpen = () => setDate('')

  return (
    <Stack className={classes.container} direction="row" spacing={1.5}>
      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
        <CloseIcon fontSize='medium'/>
      </IconButton>
      <SearchBar className={disabled?undefined:classes.searchBar}>
          <SearchIconWrapper>
              <SearchIcon />
          </SearchIconWrapper>
          <StyledInputBase
            disabled={disabled}
            onChange={handleSearch}
            placeholder="Search by request and date"
            value={value}
            inputProps={{ 'aria-label': 'search' }}
          />
      </SearchBar>      
      <IconButton  aria-label="delete" size="medium">
        <CalendarTodayIcon fontSize='medium'/>
      </IconButton>
      <StaticDatePicker disabled={disabled} date={date}
        changeDate={setDate} handleOnOpen={handleOnOpen} />
    </Stack>
    )
}

export default Search