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 Box from '@material-hu/mui/Box';
import Tooltip from '@material-hu/mui/Tooltip';
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 { useLokaliseTranslation } from 'src/utils/i18n';

export type FormRequestSLAProps = {
  sla?: SLATimer;
  status?: string;
};

export const FormRequestSLA: FC<FormRequestSLAProps> = props => {
  const { sla, status } = props;
  const { t } = useLokaliseTranslation('forms');

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

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

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

  return (
    <Tooltip
      title={
        sla.type === SLAType.RESOLUTION
          ? t('SLA_RESOLUTION')
          : t('SLA_ATTENTION')
      }
      componentsProps={{
        tooltip: {
          sx: {
            p: '4px 8px',
            borderRadius: '4px',
          },
        },
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          gap: 0.5,
          justifyContent: 'end',
          width: 'max-content',
        }}
      >
        {sla.type === SLAType.ATTENTION && !isClosed && (
          <AccessTimeIcon
            fontSize="small"
            color={SLAColor}
          />
        )}
        {sla.type === SLAType.RESOLUTION && !isClosed && (
          <TimelapseIcon
            fontSize="small"
            color={SLAColor}
          />
        )}
        {isClosed && (
          <CheckCircleOutlineIcon
            fontSize="small"
            color="primary"
          />
        )}
        <Typography
          color="secondary"
          sx={{ fontSize: '12px', fontWeight: 600 }}
        >
          {getSLATime(sla.sla, sla.elapsedTime, sla.trackedTime, isClosed)}
        </Typography>
      </Box>
    </Tooltip>
  );
};

export default FormRequestSLA;