import { type FC } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { Link as RouterLink } from 'react-router-dom';

import { parseISO } from 'date-fns';
import Link from '@material-hu/mui/Link';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { type CelebrationUser } from 'src/types/upcomingCelebrations';
import { getFullName } from 'src/utils/userUtils';

export type CelebrationTranslationProps = {
  user: CelebrationUser;
  canCongratulate: boolean;
  currentUserId: number;
  celebrationDate: string;
};

export const CelebrationTranslation: FC<
  CelebrationTranslationProps
> = props => {
  const { user, canCongratulate, currentUserId, celebrationDate } = props;

  const { t } = useTranslation('celebrations');

  const { isUserAnniversary, isUserBirthday } = user;

  let aniversaryYears = 0;
  // if statement for type system mainly. aniversaryYears is used in upcoming_anniversary,
  //  congratulate_anniversary when isUserAnniversary is true. Hiring date should not be null then.
  if (user.hiringDate) {
    aniversaryYears =
      parseISO(celebrationDate).getFullYear() -
      parseISO(user.hiringDate).getFullYear();
  }

  const firstAniversary = aniversaryYears === 1;

  const getTranslationToShow = () => {
    if (!canCongratulate) {
      return isUserAnniversary ? 'upcoming_anniversary' : 'upcoming_birthday';
    }
    if (isUserBirthday) {
      if (currentUserId === user.id) return 'your_birthday';
      return 'congratulate_birthday';
    }
    if (isUserAnniversary) {
      if (currentUserId === user.id) return 'your_anniversary';
      return firstAniversary
        ? 'congratulate_first_year'
        : 'congratulate_anniversary';
    }
  };

  return (
    <Stack>
      <Link
        component={RouterLink}
        to={profileRoutes.profile(user.id)}
        variant="body1"
        fontWeight="semiBold"
        sx={{
          color: theme => theme.palette.new.text.neutral.default,
          textDecoration: 'none',
        }}
      >
        {getFullName(user)}
      </Link>
      <Typography variant="body2">
        <Trans
          i18nKey={getTranslationToShow()}
          t={t}
          values={{
            name: getFullName(user),
            year: aniversaryYears,
          }}
          components={{
            bold: <strong />,
          }}
        />
      </Typography>
    </Stack>
  );
};

export default CelebrationTranslation;