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

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

import Label from 'src/components/Label';

type Props = {
  status: ReviewCycleStatus;
};

const STATUS_COLOR_MAP = {
  [ReviewCycleStatus.DRAFT]: {
    background: '#FFFFFF',
    border: '#D0D1D4',
    label: '#757575',
  },
  [ReviewCycleStatus.IN_PROGRESS]: {
    background: '#E3F6F3',
    border: 'transparent',
    label: '#107569',
  },
  [ReviewCycleStatus.FINISHED]: {
    background: '#ECEDEE',
    border: 'transparent',
    label: '#757575',
  },
  [ReviewCycleStatus.PENDING]: {
    background: '#FEF1E1',
    border: 'transparent',
    label: '#B54708',
  },
  [ReviewCycleStatus.SELECTION]: {
    background: '#E1F5F9',
    border: 'transparent',
    label: '#0F7190',
  },
};

const ReviewCycleLabelStatus = ({ status }: Props) => {
  const { t } = useLokaliseTranslation('performance');

  return (
    <Label
      color={STATUS_COLOR_MAP[status].background}
      sx={{
        border: '0.5px solid',
        borderColor: STATUS_COLOR_MAP[status].border,
      }}
      size="small"
    >
      <Typography
        variant="subtitle2"
        fontSize="12px"
        sx={{
          color: STATUS_COLOR_MAP[status].label,
          textTransform: 'uppercase',
        }}
      >
        {t(`cycles.status.${status}`)}
      </Typography>
    </Label>
  );
};

export default ReviewCycleLabelStatus;