import React from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Pill, Typography} from '@components';
import {getVariantValues} from '@components/_HuGo/Pill/styles';
import {
  ServiceManagementTaskSla,
  ServiceManagementTaskState,
} from '@modules/serviceManagement/interfaces';
import {getSlaViewProps} from '@modules/serviceManagement/utils';
import {useTheme} from '@shared/theme';

interface Props {
  sla: ServiceManagementTaskSla;
  state: ServiceManagementTaskState;
  onPressInfo?: () => void;
  isAgent?: boolean;
}

function ServiceManagementResolutionTimer({
  sla,
  state,
  onPressInfo,
  isAgent,
}: Props) {
  const {t} = useTranslation();
  const {iconSizes, theme} = useTheme();
  const {variant, Icon, time} = getSlaViewProps(state, sla, isAgent);
  const {color} = getVariantValues({
    variant,
    appearance: 'auto',
    theme,
  });

  return (
    <Pressable onPress={onPressInfo} disabled={!onPressInfo}>
      <Pill variant={variant}>
        <Icon size={iconSizes.x4} color={color} />
        <Typography variant="xxs" weight="semiBold" color={color}>
          {sla.expired ? t('service_management.time_expired') : time}
        </Typography>
      </Pill>
    </Pressable>
  );
}

export default ServiceManagementResolutionTimer;