import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import IconButton from '@material-hu/mui/IconButton';

import { BOX_SHADOW_SIDEBAR_BUTTONS } from 'src/constants/orgChart';

import SearchBar from '../SearchBar';

export type SearchButtonProps = {
  Icon: any;
  handleOnClick: any;
  onClose: any;
  isOpen: boolean;
};

const SearchButton: FC<SearchButtonProps> = props => {
  const { Icon, handleOnClick, onClose, isOpen } = props;

  return (
    <Box
      sx={{
        position: 'relative',
        width: 'fit-content',
        display: 'flex',
      }}
    >
      <IconButton
        onClick={handleOnClick}
        sx={{
          boxShadow: BOX_SHADOW_SIDEBAR_BUTTONS,
          borderRadius: '4px',
          backgroundColor: '#ffffff',
          p: 0.8,
          mb: 0.6,
          opacity: !isOpen ? 1 : 0,
        }}
      >
        <Icon
          fontSize="medium"
          sx={{ color: '#000000' }}
        />
      </IconButton>
      <Box
        sx={{
          width: isOpen ? 'calc(100vw - 100px)' : 0,
          transition: 'width 1.4s cubic-bezier(0.000, 0.795, 0.000, 1.000)',
          opacity: isOpen ? 1 : 0,
          position: 'absolute',
          right: 0,
          overflow: 'hidden',
        }}
      >
        <SearchBar
          isMobile
          onClose={onClose}
        />
      </Box>
    </Box>
  );
};

export default SearchButton;