FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/ForwardSearchList/ForwardSearch/index.tsx

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

import StaticDatePicker from "./StaticDatePicker";
import { updateUser } from '../../../../../../api-data';
import { asyncCurrentUser } from '../../../../../../redux/authorization/operations';

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

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',
    width: '100%',
    display: 'flex',
    flexWrap:'nowrap',
    alignItems: 'center',
    alignContent: 'center',
    padding: '0px 5px',
  },
  searchBarActive: {
    outline: '2px solid  #2184f7',
    color: '#2184f7',
  },
  iconClose: {
    '&:hover': {
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },  
})

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

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

const ForwardSearch = ({handleSearch,value,total,sort,setDate,date}:IForwardSearch) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const disabled = total === '0' ? true : false
  const handleSort = () => {
    updateUser({ sort: !sort })
    setTimeout(() => {
      dispatch(asyncCurrentUser())
    }, 1000);
  }
  const handleOnOpen = () => setDate('')
 
  return (
    <div className={classes.toolBar} >
      <IconButton aria-label="delete" size="medium">
        <CloseIcon id='cancel' className={classes.iconClose} 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 date={date} disabled={disabled} 
          changeDate={setDate} handleOnOpen={handleOnOpen} />        
          <CalendarTodayIcon fontSize='medium' style={{color:date?'#2184f7':'#b1aeae'}}/>
      </IconButton>
      <Switch onClick={handleSort} checked={sort} {...label} disabled={disabled} />
    </div>
    )
}

export default ForwardSearch