import InputBase from '@mui/material/InputBase';
import Toolbar from '@mui/material/Toolbar'
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 Switch from '@mui/material/Switch';
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 { getChat } from '../../../../../../redux/chat/selector'
import { sortChat } from '../../../../../../api-data';
import StaticDatePicker from "./StaticDatePicker";

const SearchBar = styled('div')(({ theme }:any) => ({
  position: 'relative',
  borderRadius: '20px',
  backgroundColor: '#f1f0f0', 
  width: '100%',
  margin:'0 5% 0 5%'
}));

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%',
  },
}));

const useStyles = makeStyles({
  toolBar: {
    color: '#b1aeae',
    height:'7vh'
  },
  searchBarActive: {
    outline: '2px solid  #2184f7',
    color: '#2184f7',
  },
})

const label = { inputProps: { 'aria-label': 'Switch demo' } };

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 { sort, companionId } = useSelector(getChat)
  const messages = useSelector(getMessages)
  const disabled = messages.length > 0 ? false : true
  const handleOnOpen = () => setDate('')
  const handleSort = () => sortChat(companionId)

  return (
    <Toolbar className={classes.toolBar} >
      <IconButton onClick={() => dispatch(actionIsOpen(''))} aria-label="delete" size="medium">
        <CloseIcon fontSize='medium'/>
      </IconButton>
      <SearchBar className={!value||disabled?undefined:classes.searchBarActive}>
          <SearchIconWrapper>
              <SearchIcon />
          </SearchIconWrapper>
          <StyledInputBase
            disabled={disabled}
            onChange={handleSearch}
            placeholder={disabled?'Disabled':'Search'}
            value={value}
            inputProps={{ 'aria-label': 'search' }}
          />
      </SearchBar>      
      <IconButton aria-label="delete" size="medium" disabled={disabled}>
        <StaticDatePicker disabled={disabled} date={date}
        changeDate={setDate} handleOnOpen={handleOnOpen} />        
        <CalendarTodayIcon fontSize='medium'
        style={{color:date?'#2184f7':'#b1aeae'}}/>
      </IconButton>
      <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} /> 
    </Toolbar>
    )
}

export default Search