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


const Search = styled('div')(({ theme }:any) => ({
  position: 'relative',
  borderRadius: '20px',
  backgroundColor: '#f1f0f0',
  '&:hover': {
    backgroundColor: '#f5f5f5',
    color:'#2184f7',
  }, 
  marginLeft: 0,
  maxWidth: '80%',
  [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'),
    maxWidth: '80%',
    [theme.breakpoints.up('sm')]: {
      width: '35ch',
      '&:focus': {
        outline: '2px solid  #2184f7',
        color: '#2184f7'
      },
    },
  },
}));

const useStyles = makeStyles({
  toolBar: {
    color: '#b1aeae',
  },
  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,
  selectedIndex: number | null,
  value: string,
  sort : boolean
}

const SearchBar = ({ handleClick, handleFocus, handleSearch, isSearch, selectedIndex, value,sort }: ISearchBar) => {
  const dispatch = useDispatch()
  const handleSort = () => {
    updateCredentials({ sort: !sort })
    dispatch(asyncCurrentUser())
  }
  
  const classes = useStyles()
    return (
        <Toolbar className={classes.toolBar}>
            <IconButton  onClick={handleClick}>
                {isSearch ? <ArrowBackIcon className={classes.iconArrow} /> : <MenuIcon className={classes.iconBtn} />}
            </IconButton>
          <Search>
              <SearchIconWrapper>
                  <SearchIcon />
              </SearchIconWrapper>
              <StyledInputBase
                 value={value}
                 onFocus={handleFocus}
                 onChange={handleSearch}
                 placeholder={selectedIndex === 1 ?'Search contacts':'Search'}
                 inputProps={{ 'aria-label': 'search' }}
              />
          </Search>
          <Switch onClick={handleSort} checked={sort} {...label} />
        </Toolbar>
    )
}

export default SearchBar