import {memo} from 'react';
import {useTranslation} from 'react-i18next';
import {IconCircleCheck} from '@tabler/icons-react-native';
import {
  Accordion,
  CardContainer,
  Divider,
  ListRow,
  PillVariant,
} from '@components/_HuGo';
import {Typography} from '@components/_core';
import {User} from '@interfaces/user';
import {TimeOffStepState} from '@modules/timeOff/interfaces';
import {getStateTagConfig} from '@modules/timeOff/utils';
import {useTheme} from '@shared/theme';
import {getCompleteName} from '@shared/utils';
import {getStepConfig} from '@shared/strings';

import {styles} from './styles';
import {getStepState} from './utils';

interface Props {
  emptyApproversText?: string;
  index: number;
  isCurrentStep: boolean;
  isPending: boolean;
  stepApprovers: User[];
  stepComment: Nullable<string>;
  stepState: TimeOffStepState;
}

function ApproversStep({
  emptyApproversText,
  index,
  isCurrentStep,
  isPending,
  stepApprovers,
  stepComment,
  stepState,
}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const isResolved = [
    TimeOffStepState.APPROVED,
    TimeOffStepState.REJECTED,
  ].includes(stepState);
  const waitingOtherStep = stepState === TimeOffStepState.WAITING_OTHER_STEP;
  const {string: stepStateText, variant: stepStateVariant} = getStateTagConfig(
    getStepState(stepState, isPending),
  );
  const {stepIcon, stepTitle} = getStepConfig(index);

  return (
    <CardContainer
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <Accordion
        initialCollapsed={!isResolved && isCurrentStep}
        withBackground={false}>
        <Accordion.Header>
          <Accordion.Avatar
            Icon={isResolved ? IconCircleCheck : stepIcon}
            variant={waitingOtherStep ? 'default' : 'primary'}
          />
          <Accordion.Title title={t(stepTitle)} />
          {!waitingOtherStep && (
            <Accordion.Pill
              text={t(stepStateText)}
              variant={stepStateVariant as PillVariant}
            />
          )}
          <Accordion.Icon />
        </Accordion.Header>
        <Accordion.Content>
          <Divider />
          {!stepApprovers.length && !!emptyApproversText && (
            <Typography
              align="center"
              variant="xs"
              color={theme.text.neutral.lighter}>
              {emptyApproversText}
            </Typography>
          )}
          {stepApprovers.map(user => (
            <ListRow key={`${index}-${user.id}`}>
              <ListRow.Avatar url={user.profilePicture} name={user} />
              <ListRow.Title
                description={user.employeeInternalId}
                title={getCompleteName(user)}
              />
            </ListRow>
          ))}
          {isResolved && !!stepComment && (
            <CardContainer>
              <Typography color={theme.text.neutral.lighter} variant="xxs">
                {t('time_off.reason')}
              </Typography>
              <Typography variant="s">{stepComment}</Typography>
            </CardContainer>
          )}
        </Accordion.Content>
      </Accordion>
    </CardContainer>
  );
}

export default memo(ApproversStep);
