import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Typography from '@material-hu/mui/Typography';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { Reaction } from 'src/types/reaction';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import getReactionUsersListDrawer from './getReactionUsersListDrawer';
import { GenericGetReactionUsersFunction } from './ReactionUsersList';

type UsersListDrawerProps = {
  id: number;
  filterReactions: Reaction[];
  getReactionUsers: GenericGetReactionUsersFunction;
  container?: HTMLDivElement | null;
};

const UsersListDrawer = ({
  id,
  filterReactions,
  getReactionUsers,
  container,
}: UsersListDrawerProps) => {
  const { t } = useTranslation(['web_only']);
  const HugoThemeProvider = useHuGoTheme();

  const extraProps = {
    id,
    filterReactions,
    getReactionUsers,
    container,
  };

  const { drawer, showDrawer } = useDrawerV2(args =>
    getReactionUsersListDrawer({ ...args, ...extraProps }),
  );

  return (
    <HugoThemeProvider>
      {drawer}
      <Typography
        variant="globalXS"
        onClick={showDrawer}
        fontWeight="fontWeightSemiBold"
        sx={{
          '&:hover': {
            textDecoration: 'underline',
            cursor: 'pointer',
            color: theme => theme.palette.ilustrations?.primaryIlus,
          },
        }}
      >
        {t('reactions.see_all')}
      </Typography>
    </HugoThemeProvider>
  );
};

export default UsersListDrawer;