import React, {memo, useState} from 'react';
import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import Icon from '@components/Icon';
import Text from '@components/Text';
import Tooltip from '@components/Tooltip';
import {FormChat} from '@modules/form/interfaces';
import {
  STATUS_WITH_RESPONSE_SLA,
  getSlaColor,
  getSlaRemainingTime,
  isFormClosed,
} from '@modules/form/utils';
import {COLORS} from '@shared/colors';
import {Opacity} from '@shared/constants';

interface Props {
  formChat: FormChat;
}

function SlaTime({formChat}: Props) {
  const {t} = useTranslation();
  const [showResponseTooltip, setShowResponseTooltip] = useState(false);
  const [showResolutionTooltip, setShowResolutionTooltip] = useState(false);
  const isClosed = isFormClosed(formChat.status);
  const showResponseSlaTimer =
    formChat?.status && STATUS_WITH_RESPONSE_SLA.includes(formChat.status);

  const handlePressResponseTooltip = () => {
    setShowResponseTooltip(true);
    setShowResolutionTooltip(false);
    setTimeout(() => setShowResponseTooltip(false), 3000);
  };

  const handlePressResolutionTooltip = () => {
    setShowResolutionTooltip(true);
    setShowResponseTooltip(false);
    setTimeout(() => setShowResolutionTooltip(false), 3000);
  };

  return (
    <>
      {formChat.timeToFirstResponseSlaTimer?.sla && showResponseSlaTimer && (
        <View style={styles.responseTimerContainer}>
          <TouchableOpacity
            activeOpacity={Opacity.FULL}
            style={styles.timeToResolveStyle}
            onPress={handlePressResponseTooltip}>
            <Icon
              name={isClosed ? 'checkCircle' : 'clock'}
              size="sm"
              color={getSlaColor(formChat.timeToResolutionSlaTimer)}
            />
            <Text
              variant="caption"
              color={COLORS.GRAY_SEVENTEEN}
              style={styles.timeContainer}>
              {getSlaRemainingTime(formChat.timeToFirstResponseSlaTimer)}
            </Text>
          </TouchableOpacity>
          <Tooltip
            visible={showResponseTooltip}
            text={t(
              isClosed
                ? 'forms.response_time_finalized_tooltip'
                : 'forms.response_time_tooltip',
            )}>
            <View style={styles.responseAnimatedTab} />
          </Tooltip>
        </View>
      )}
      {formChat.timeToResolutionSlaTimer?.sla && (
        <>
          <TouchableOpacity
            activeOpacity={Opacity.FULL}
            style={styles.timeToResolveStyle}
            onPress={handlePressResolutionTooltip}>
            <Icon
              name={isClosed ? 'checkCircle' : 'progressClock'}
              size="sm"
              color={getSlaColor(formChat.timeToResolutionSlaTimer)}
            />
            <Text
              variant="caption"
              color={COLORS.GRAY_SEVENTEEN}
              style={styles.timeContainer}>
              {getSlaRemainingTime(formChat.timeToResolutionSlaTimer)}
            </Text>
          </TouchableOpacity>
          <Tooltip
            visible={showResolutionTooltip}
            text={t(
              isClosed
                ? 'forms.remaining_time_information_closed'
                : 'forms.remaining_time_information_assigned',
            )}>
            <View style={styles.resolveAnimatedTab} />
          </Tooltip>
        </>
      )}
    </>
  );
}

const COMMON_BORDER = 9;

const COMMON_ANIMATED_TAB: ViewStyle = {
  backgroundColor: COLORS.TRANSPARENT,
  borderBottomColor: COLORS.GRAY_NINETEEN,
  borderBottomWidth: COMMON_BORDER * 2,
  borderLeftColor: COLORS.TRANSPARENT,
  borderLeftWidth: COMMON_BORDER,
  borderRightColor: COLORS.TRANSPARENT,
  borderRightWidth: COMMON_BORDER,
  borderStyle: 'solid',
  height: 0,
  paddingHorizontal: 10,
  paddingVertical: 5,
  position: 'absolute',
  right: -6,
  width: 0,
};

export const styles = StyleSheet.create({
  timeToResolveStyle: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    paddingTop: 5,
    zIndex: 10,
  },
  timeContainer: {
    marginLeft: 10,
  },
  responseTimerContainer: {flex: 1},
  responseAnimatedTab: {
    ...COMMON_ANIMATED_TAB,
    bottom: 5.5,
    transform: [{rotate: '180deg'}],
    zIndex: -1,
  },
  resolveAnimatedTab: {
    ...COMMON_ANIMATED_TAB,
    top: 5.5,
  },
});

export default memo(SlaTime);