import { FC } from 'react';

import AccessTimeIcon from '@material-hu/icons/material/AccessTime';
import CheckCircleOutlineIcon from '@material-hu/icons/material/CheckCircleOutline';
import TimelapseIcon from '@material-hu/icons/material/Timelapse';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { SLATimer, SLAType } from 'src/types/chats';
import { FormPossibleStatus } from 'src/types/forms';
import { getSLATime, getSLAColor } from 'src/utils/form';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type ChatSLAProps = {
  sla: SLATimer;
  status: string;
};

export const ChatSLA: FC<ChatSLAProps> = props => {
  const { sla, status } = props;
  const { t } = useTranslation();

  const isClosed =
    status === FormPossibleStatus.CANCELLED ||
    status === FormPossibleStatus.CLOSED;

  const SLAColor = getSLAColor(sla?.sla, sla?.elapsedTime);

  if (!sla || !sla.sla) {
    return null;
  }

  return (
    <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'center' }}>
      {sla.type === SLAType.RESOLUTION && !isClosed && (
        <TimelapseIcon
          fontSize="medium"
          color={SLAColor}
        />
      )}
      {sla.type === SLAType.ATTENTION && !isClosed && (
        <AccessTimeIcon
          fontSize="medium"
          color={SLAColor}
        />
      )}
      {isClosed && (
        <CheckCircleOutlineIcon
          fontSize="medium"
          color="primary"
        />
      )}
      <Stack>
        <Typography
          color="secondary"
          sx={{ fontSize: '12px', fontWeight: 600 }}
        >
          {getSLATime(sla.sla, sla.elapsedTime, sla.trackedTime, isClosed)}
        </Typography>
        <Typography
          color="secondary"
          sx={{ fontSize: '10px' }}
        >
          {sla.type === 'TIME_TO_RESOLUTION'
            ? t('SLA_RESOLUTION')
            : t('SLA_ATTENTION')}
        </Typography>
      </Stack>
    </Stack>
  );
};

export default ChatSLA;