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

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

import Label from 'src/components/Label';

type Props = {
  status: ReviewDeliverStatus;
};

const STATUS_COLOR_MAP = {
  [ReviewDeliverStatus.SHARED_CONFIRMED]: {
    background: '#E3F6F3',
    border: 'transparent',
    label: '#107569',
  },
  [ReviewDeliverStatus.SHARED_UNCONFIRMED]: {
    background: '#FEF1E1',
    border: 'transparent',
    label: '#B54708',
  },
  [ReviewDeliverStatus.NOT_SHARED]: {
    background: '#FFFFFF',
    border: '#D0D1D4',
    label: '#757575',
  },
  [ReviewDeliverStatus.SHARE_DISABLED]: {
    background: '#FFFFFF',
    border: '#D0D1D4',
    label: '#A3A3A3',
  },
};

const ReviewDeliveryStatus = ({ status }: Props) => {
  const { t } = useLokaliseTranslation('backoffice_only');

  return (
    <>
      {status && (
        <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 }}
          >
            {t('backoffice_only:review_delivery_status.delivery_status', {
              context: status,
            })}
          </Typography>
        </Label>
      )}
      {!status && (
        <Typography
          color="secondary"
          ml={4}
        >
          -
        </Typography>
      )}
    </>
  );
};

export default ReviewDeliveryStatus;