FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SearchBar/index.tsx

import Toolbar from '@mui/material/Toolbar'
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import InputBase from '@mui/material/InputBase';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Switch from '@mui/material/Switch';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import StaticDatePicker from "./StaticDatePicker";
import { styled } from '@mui/material/styles';
import { makeStyles } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import { useState } from 'react';
import { updateUser } from '../../../../api-data';
import { TLeftIsOpen } from '../../../../typescript/redux/control/types';
import { asyncCurrentUser } from '../../../../redux/authorization/operations';


const Search = 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',
  },
  activeSearch: {
        outline: '2px solid  #2184f7',
        color: '#2184f7'
  },
  iconBtn: {
    '&:hover': {
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },
  iconArrow: {
    '&:hover': {
      transform: 'rotate(360deg)',
      transition: 'all 250ms ease-out ',
    }
  },
})

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

interface ISearchBar {
  handleClick:() => void,
  handleOpenIsSearch:() => void,
  handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
  leftIsOpen: TLeftIsOpen,
  value: string,
  sort: boolean,
  setDate: React.Dispatch<any>,
  date:any,
  disabled: boolean,
}

const SearchBar = ({ handleClick, handleOpenIsSearch, handleSearch, leftIsOpen,
  value, sort, setDate, date, disabled }: ISearchBar) => {
  const dispatch = useDispatch()
  const handleSort = () => {
    updateUser({ sort: !sort })
    setTimeout(() => {
      dispatch(asyncCurrentUser())
    }, 1000);
  }
  const handleOnOpen = () => setDate('')  
  
  const classes = useStyles()
    return (
      <Toolbar className={classes.toolBar}>
        <IconButton  onClick={handleClick}>
                {leftIsOpen ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
        </IconButton>
        <div onFocus={handleOpenIsSearch} style={{display:'flex',width:'100%'}}>
          <Search className={value?classes.activeSearch:undefined}>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              value={value}
              onChange={handleSearch}
              placeholder={disabled?'Disabled':'Search'}
              inputProps={{ 'aria-label': 'search' }}
              disabled={disabled}/>
           </Search>
           <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>
    </Toolbar>
    )
}

export default SearchBar