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 { styled } from '@mui/material/styles';
import { makeStyles } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import { updateUser } from '../../../../api-data';
import { asyncCurrentUser } from '../../../../redux/authorization/operations';
import StaticDatePicker from "./StaticDatePicker";


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,
  handleFocus:() => void,
  handleSearch:(e: React.ChangeEvent<HTMLInputElement>) => void,
  isSearch: boolean,
  value: string,
  sort: boolean,
  setDate: React.Dispatch<any>,
  date:any,
}

const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch,
  value, sort,setDate,date }: ISearchBar) => {
  const dispatch = useDispatch()
  const handleSort = () => {
    updateUser({ sort: !sort })
    dispatch(asyncCurrentUser())
  }
  const handleOnOpen = () => setDate('')  
  
  const classes = useStyles()
    return (
        <Toolbar className={classes.toolBar}>
            <IconButton  onClick={handleClick}>
                {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
            </IconButton>
          <Search className={value?classes.activeSearch:undefined}>
              <SearchIconWrapper>
                  <SearchIcon />
              </SearchIconWrapper>
          <StyledInputBase
                 value={value}
                 onFocus={handleFocus}
                 onChange={handleSearch}
                 placeholder='Search'
                 inputProps={{ 'aria-label': 'search' }}
              />
        </Search>
        <IconButton aria-label="delete" size="medium">
          <StaticDatePicker  date={date} 
           changeDate={setDate} handleOnOpen={handleOnOpen} />        
          <CalendarTodayIcon fontSize='medium'
           style={{color:date?'#2184f7':'#b1aeae'}}/>
        </IconButton>        
        <Switch onClick={handleSort} checked={sort} {...label} />
      </Toolbar>
    )
}

export default SearchBar