import {
  IconMinus,
  IconPhotoSensor,
  IconPlus,
  IconUserCircle,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { useTranslation } from '../i18n';

import SidebarButton from './buttons/SidebarButton';

export type SidebarMenuProps = {
  handleZoomIn: any;
  handleZoomOut: any;
  handleFitChart: any;
  handleFindMe: any;
};

const SidebarMenu = (props: SidebarMenuProps) => {
  const { handleZoomIn, handleZoomOut, handleFitChart, handleFindMe } = props;

  const { t } = useTranslation();
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          position: 'absolute',
          right: '16px',
          top: '100px',
          alignItems: 'end',
          zIndex: 20,
        }}
      >
        <SidebarButton
          Icon={IconPlus}
          handleOnClick={handleZoomIn}
        />
        <SidebarButton
          Icon={IconMinus}
          handleOnClick={handleZoomOut}
        />
        <Tooltip
          title={t('FIT_SCREEN')}
          placement="left"
          arrow
          componentsProps={{
            tooltip: {
              sx: {
                borderRadius: '4px',
              },
            },
          }}
        >
          <SidebarButton
            Icon={IconPhotoSensor}
            handleOnClick={handleFitChart}
          />
        </Tooltip>
        <Tooltip
          title={t('FIND_ME')}
          placement="left"
          arrow
          componentsProps={{
            tooltip: {
              sx: {
                borderRadius: '4px',
              },
            },
          }}
        >
          <SidebarButton
            Icon={IconUserCircle}
            handleOnClick={handleFindMe}
          />
        </Tooltip>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SidebarMenu;