import { useState } from 'react';
import { FormProvider, useFormContext } from 'react-hook-form';

import CloseIcon from '@material-hu/icons/material/Close';
import Divider from '@material-hu/mui/Divider';
import Drawer from '@material-hu/mui/Drawer';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

import UsersList from '../UsersList';

const ReviewHeatmapDrawer = () => {
  const [open, setOpen] = useState(false);
  const [users, setUsers] = useState<User[]>([]);
  const { t } = useLokaliseTranslation(['backoffice_only']);
  const form = useFormContext();

  const handleOpen = (listed: User[]) => {
    setUsers(listed);
    setOpen(true);
  };

  const handleClose = () => setOpen(!open);

  const component = (
    <FormProvider {...form}>
      <Drawer
        anchor="right"
        open={open}
        onClose={handleClose}
        sx={{ zIndex: 1300 }}
        PaperProps={{
          sx: {
            width: 420,
            px: 2,
            py: 3,
            borderTopLeftRadius: 16,
            borderBottomLeftRadius: 16,
          },
        }}
      >
        <Stack sx={{ height: '100%' }}>
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Typography variant="h6">
              {t('backoffice_only:review_heatmap.employees')}
            </Typography>
            <IconButton
              aria-label={t('general:close')}
              onClick={handleClose}
            >
              <CloseIcon />
            </IconButton>
          </Stack>
          <Divider sx={{ mt: 1, mb: 2 }} />
          <Stack sx={{ overflow: 'auto', flex: 1 }}>
            <UsersList users={users} />
          </Stack>
        </Stack>
      </Drawer>
    </FormProvider>
  );

  return { component, handleOpen };
};

export default ReviewHeatmapDrawer;