import { useNavigate } from 'react-router-dom';

import { IconGift } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Avatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import Title from '@material-hu/components/design-system/Title';

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

import { useGetAvailablePoints } from '../../hooks/useGetAvailablePoints';
import { acknowledgementsRoutes } from '../../routes';
import { isExchangeAvailable } from '../../utils';

import { KudosPointsCardContainer } from './container';
import { KudosPointsCardSkeleton } from './skeleton';

export const KudosPointsCard = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const navigate = useNavigate();
  const { instance, permissions } = useAuth();

  const canExchange = isExchangeAvailable(instance, permissions);

  const { availablePoints, isLoading } = useGetAvailablePoints(canExchange);

  const handleExchangesClick = () => {
    navigate(acknowledgementsRoutes.exchanges());
  };

  if (!canExchange) return null;

  if (isLoading) return <KudosPointsCardSkeleton />;

  const hasPoints = availablePoints > 0;

  return (
    <KudosPointsCardContainer>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <Avatar
          size="large"
          color="primary"
          Icon={IconGift}
        />
        {hasPoints && (
          <Title
            variant="L"
            title={String(availablePoints)}
            description={t('products.my_points_description')}
          />
        )}
        {!hasPoints && (
          <Title
            variant="S"
            title={t('products.no_points_yet')}
          />
        )}
      </Stack>
      <Button
        size="large"
        variant={hasPoints ? 'contained' : 'outlined'}
        color="primary"
        fullWidth
        onClick={handleExchangesClick}
      >
        {hasPoints ? t('products.redeem_points') : t('products.view_exchanges')}
      </Button>
    </KudosPointsCardContainer>
  );
};
