import { useState } from 'react';

import HighlightIcon from '@material-hu/icons/material/Highlight';
import {
  IconPhotoSensor,
  IconRefresh,
  IconSearch,
  IconUserCircle,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import SidebarButton from 'src/pages/dashboard/orgChart/components/buttons/SidebarButton';

import SearchButton from './buttons/SearchButton';

export type SidebarMenuMobileProps = {
  handleHighlight: any;
  handleSwap: any;
  handleFitChart: any;
  handleFindMe: any;
};

const SidebarMenuMobile = (props: SidebarMenuMobileProps) => {
  const { handleHighlight, handleSwap, handleFitChart, handleFindMe } = props;

  const [isOpen, setIsOpen] = useState(false);

  const HuGoThemeProvider = useHuGoTheme();

  const handleOpenSearchBar = () => setIsOpen(true);

  const handleCloseSearchBar = () => setIsOpen(false);

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          position: 'absolute',
          right: '16px',
          top: '40px',
          alignItems: 'end',
          zIndex: 20,
        }}
      >
        <SearchButton
          Icon={IconSearch}
          handleOnClick={handleOpenSearchBar}
          onClose={handleCloseSearchBar}
          isOpen={isOpen}
        />
        <SidebarButton
          Icon={HighlightIcon}
          handleOnClick={handleHighlight}
        />
        <SidebarButton
          Icon={IconRefresh}
          handleOnClick={handleSwap}
        />
        <SidebarButton
          Icon={IconPhotoSensor}
          handleOnClick={handleFitChart}
        />
        <SidebarButton
          Icon={IconUserCircle}
          handleOnClick={handleFindMe}
        />
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SidebarMenuMobile;