import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { useAuth } from 'src/contexts/JWTContext';
import { BalanceConformationType, UnitVacations } from 'src/types/vacations';
import { formatDateInVacations } from 'src/utils/date';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { joinTwoDates } from 'src/utils/vacations';

type BalanceConformationItemProps = {
  balanceData: BalanceConformationType;
  policyUnit: UnitVacations;
};

const BalanceConformationItem: FC<BalanceConformationItemProps> = props => {
  const { balanceData, policyUnit } = props;

  const { t } = useLokaliseTranslation('time_off');
  const { user: loggedUser } = useAuth();

  return (
    <HuTableRow>
      <HuTableCell>
        <Stack
          sx={{
            justifyContent: 'space-between',
          }}
        >
          <Typography>
            {`${t('general:cycle')} ${joinTwoDates(
              balanceData.fromDate,
              balanceData.toDate,
              loggedUser,
            )}`}
          </Typography>
          {balanceData.expirationDate && (
            <Typography
              sx={{
                color: theme => theme.palette.new.text.neutral.lighter,
              }}
            >
              {t('EXPIRATION', {
                expiration: formatDateInVacations({
                  date: balanceData.expirationDate,
                  user: loggedUser!,
                  type: 'P',
                }),
              })}
            </Typography>
          )}
        </Stack>
      </HuTableCell>
      <HuTableCell>
        <Typography>
          {policyUnit === UnitVacations.DAYS
            ? t('total_days', { count: balanceData.amount })
            : t('hours', { count: balanceData.amount })}
        </Typography>
      </HuTableCell>
    </HuTableRow>
  );
};

export default BalanceConformationItem;
