import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import useFormatDate from 'src/hooks/useFormatDate';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useKudosRankingFilters } from '../../hooks/useKudosRankingFilters';

import { RankingFilters } from './RankingFilters';
import { RankingList } from './RankingList';

export const KudosRanking = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { instance } = useAuth();
  const { spacing } = useTheme();
  const { formatDate } = useFormatDate();
  const { hasDateFilters } = useKudosRankingFilters();

  const canSeeRanking = Boolean(
    instance?.viewAcknowledgementsRanking &&
      instance?.showAcknowledgmentsPoints,
  );

  const title = hasDateFilters
    ? t('ranking')
    : t('monthly_ranking', { month: formatDate(new Date(), 'MMMM') });

  if (!canSeeRanking) return null;

  return (
    <CardContainer
      sx={{
        maxHeight: 'fit-content',
        maxWidth: 450,
        top: spacing(4),
        position: 'sticky',
      }}
      fullWidth
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          mb: 1.5,
        }}
      >
        <Title
          variant="M"
          title={title}
        />
        <RankingFilters />
      </Stack>
      <RankingList canSeeRanking={canSeeRanking} />
    </CardContainer>
  );
};
