import { FC } from 'react';

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

import useProfile from 'src/hooks/queryHooks/profile';
import { LastTransaction } from 'src/types/forms';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

export type StepDescriptionProps = {
  lastTransaction: LastTransaction;
  responsibleId: number | null;
};

// TODO: al igual que ApprovalWorkflowContent en la etapa de mejoras el back debe
// hacer los arreglos necesarios para sacar el parche de responsableId
const StepDescription: FC<StepDescriptionProps> = props => {
  const { lastTransaction, responsibleId } = props;

  const { t } = useLokaliseTranslation('forms');
  const theme = useTheme();

  const { data } = useProfile(
    lastTransaction?.authorId,
    !!lastTransaction?.authorId,
  );

  const authorData = data?.data || undefined;
  return (
    <>
      {responsibleId && lastTransaction && (
        <Typography
          sx={{
            wordBreak: 'break-word',
            display: 'block',
            fontSize: '14px',
          }}
          className="stepperTitle"
          variant="caption"
        >
          {t(`LAST_TRANSACTION_${lastTransaction?.transactionType}`, {
            author: authorData && getFullName(authorData),
          })}
        </Typography>
      )}
      {!responsibleId && (
        <Typography
          sx={{
            wordBreak: 'break-word',
            display: 'block',
            fontSize: '14px',
          }}
          className="stepperTitle"
          variant="caption"
        >
          {t('FORM_STATUS_PENDING')}
        </Typography>
      )}
      {responsibleId && lastTransaction && (
        <Typography
          sx={{
            wordBreak: 'break-word',
            display: 'block',
            mt: 1,
            color: `${theme.palette.new.text.neutral.brand} !important`,
            fontStyle: 'italic',
            fontSize: '14px',
          }}
          className="stepperTitle"
          variant="caption"
        >
          {lastTransaction?.message}
        </Typography>
      )}
    </>
  );
};

export default StepDescription;