/**
 * @Move (SQPM)
 * Only used by the Performance module - move to Performance/
 */
import { isNil } from 'lodash-es';
import Typography from '@material-hu/mui/Typography';

import { ReviewCycleStatus, type ReviewsTab } from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import Label from 'src/components/Label';

type Props = {
  status?: ReviewCycleStatus;
  type: ReviewsTab;
};

const STATUS_COLOR_MAP = {
  [ReviewCycleStatus.FINISHED]: { background: '#E3F6F3', label: '#107569' },
  [ReviewCycleStatus.IN_PROGRESS]: {
    background: '#FEF1E1',
    label: '#B54708',
  },
  [ReviewCycleStatus.PENDING]: { background: '#FDE8E7', label: '#B42318' },
  [ReviewCycleStatus.SELECTION]: { background: '#E1F5F9', label: '#0F7190' },
};

const ReviewStatus = ({ status, type }: Props) => {
  const { t } = useLokaliseTranslation(['backoffice_only']);

  if (isNil(status))
    return (
      <Typography
        variant="body2"
        color="secondary"
      >
        --
      </Typography>
    );

  return (
    <Label
      color={
        STATUS_COLOR_MAP[status as keyof typeof STATUS_COLOR_MAP].background
      }
      sx={{ border: '0.5px solid', borderColor: 'transparent' }}
      size="small"
    >
      <Typography
        variant="caption"
        sx={{
          color:
            STATUS_COLOR_MAP[status as keyof typeof STATUS_COLOR_MAP].label,
        }}
      >
        {t('backoffice_only:review_status.performance_review_status', {
          context:
            status === ReviewCycleStatus.PENDING ? `${status}_${type}` : status,
        })}
      </Typography>
    </Label>
  );
};

export default ReviewStatus;