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

import InputBase from '@mui/material/InputBase';
import Toolbar from '@mui/material/Toolbar'
import SearchIcon from '@mui/icons-material/Search';
import CloseIcon from '@mui/icons-material/Close';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import { makeStyles } from '@material-ui/core'

const SearchBar = styled('div')(() => ({
  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',
    width:'100%'
  },
  searchBarActive: {
    outline: '2px solid  #2184f7',
    color: '#2184f7',
  },
  iconClose: {
    '&:hover': {
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },  
})


interface IForwardSearch {
  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void,
  value: string,
  total: string
}

const ForwardSearch = ({handleSearch,value,total}:IForwardSearch) => {
  const classes = useStyles()
  const disabled = total === '0' ? true : false
 
  return (
    <Toolbar className={classes.toolBar} >
      <IconButton aria-label="delete" size="medium">
        <CloseIcon 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>      
    </Toolbar>
    )
}

export default ForwardSearch