import React, {useState} from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import Icon from '@components/Icon';
import Text from '@components/Text';
import Tooltip from '@components/Tooltip';
import {BaseForm, FormStepType} from '@modules/form/interfaces';
import {COLORS} from '@shared/colors';
import {Opacity} from '@shared/constants';
import {SPACING} from '@shared/theme';

import {getTimeToShow, getTimeValues} from './utils';

interface Props {
  form?: BaseForm;
  iAmApprover?: boolean;
}

function Time({form, iAmApprover}: Props) {
  const {t} = useTranslation();
  const [showTooltip, setShowTooltip] = useState(false);
  const isClosed = form?.approvalStatus === FormStepType.CLOSED;
  const isPending = form?.approvalStatus === FormStepType.PENDING;
  const isUnassigned = form?.approvalStatus === FormStepType.UNASSIGNED;
  const {timeToResolve, iconColor} = getTimeValues({
    isClosed,
    isPending,
    isUnassigned,
    ...form,
  });

  const handlePressTooltip = () => {
    setShowTooltip(true);
    setTimeout(() => setShowTooltip(false), 3000);
  };

  return !!(
    (isPending && form?.lastFilledStep?.reviewDatetimeLimit) ||
    (isUnassigned && form?.lastFilledStep?.assignedDatetimeLimit) ||
    (isClosed && form?.lastFilledStep?.reviewDatetime)
  ) &&
    !!timeToResolve &&
    iAmApprover ? (
    <>
      <TouchableOpacity
        activeOpacity={Opacity.FULL}
        style={styles.timeToResolveStyle}
        onPress={handlePressTooltip}>
        <Icon name={isClosed ? 'checkCircle' : 'clock'} color={iconColor} />
        <Text variant="caption" color={COLORS.GRAY_SEVENTEEN}>
          {getTimeToShow(timeToResolve)}
        </Text>
      </TouchableOpacity>
      <Tooltip
        visible={showTooltip}
        text={t(
          isClosed
            ? 'forms.remaining_time_information_closed'
            : 'forms.remaining_time_information_assigned',
        )}>
        <View style={styles.animatedTab} />
      </Tooltip>
    </>
  ) : null;
}

const COMMON_BORDER = 9;

export const styles = StyleSheet.create({
  timeToResolveStyle: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: SPACING['x0.5'],
  },
  animatedTab: {
    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,
    top: 5.5,
    width: 0,
  },
});

export default Time;