import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCheck} from '@tabler/icons-react-native';
import {Typography} from '@components/_core';
import {Avatar, Divider} from '@components/_HuGo';
import {TimeOffStepState} from '@modules/timeOff/interfaces';
import {getStepConfig} from '@shared/strings';
import {useTheme} from '@shared/theme';

import {ApprovalStepDisplayRow} from '../../interfaces';
import {styles} from './styles';

interface Props {
  step: ApprovalStepDisplayRow;
  withDivider: boolean;
  differentLines?: boolean;
}

function Step({step, withDivider, differentLines}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const isApproved = step.state === TimeOffStepState.APPROVED;
  const isRejected = step.state === TimeOffStepState.REJECTED;
  const isResolved = isApproved || isRejected;
  const isHighlighted = step.state !== TimeOffStepState.WAITING_OTHER_STEP;
  const flexGrow = withDivider ? 1 : 0;

  const commonTranslation = t(getStepConfig(step.position - 1).stepTitle);

  return (
    <View style={[styles.container, {flexGrow}]}>
      <View style={styles.avatarContainer}>
        <Avatar
          {...(isResolved
            ? {Icon: IconCheck, iconColor: theme.text.neutral.brand}
            : {customLabel: step.position.toString()})}
          variant={
            isHighlighted || isResolved
              ? isRejected
                ? 'error'
                : 'primary'
              : 'default'
          }
          style={
            isHighlighted && {
              ...styles.withBorder,
              backgroundColor: isApproved
                ? theme.background.layout.brand
                : theme.background.elements.default,
              borderColor: theme.border.neutral.brand,
            }
          }
        />
        {withDivider && (
          <Divider
            color={isApproved ? theme.graphics.hugo[500] : undefined}
            style={styles.divider}
          />
        )}
      </View>
      <Typography weight="semiBold">
        {differentLines
          ? commonTranslation.replace(/ /g, '\n')
          : commonTranslation}
      </Typography>
    </View>
  );
}

export default Step;
