import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronDown} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {Button} from '@components/_HuGo/Button';
import {getPercentage} from '@shared/utils';

import {NavigationModal} from '../../components/NavigationModal';
import {useStepper} from '../../hooks/useStepper';
import {styles} from './styles';

function StepSelector() {
  const {t} = useTranslation();
  const {
    currentIndex,
    setIsVisibleModal,
    totalStepsCount,
    steps,
    goToStep,
    isVisibleStepsModal,
  } = useStepper();
  const currentStep = currentIndex + 1;
  const safeProgress = Math.min(currentStep, totalStepsCount);
  const completed = getPercentage({
    current: safeProgress,
    total: totalStepsCount,
  });
  const onOpenStepsModal = () => setIsVisibleModal(true);
  return (
    <>
      <View style={styles.stepsCount}>
        <Typography variant="xs">
          {t('general.total_completed', {completed})}
        </Typography>
        <Button
          variant="secondary"
          size="sm"
          text={t('general.steps', {
            current: currentStep,
            total: totalStepsCount,
          })}
          IconRight={IconChevronDown}
          onPress={onOpenStepsModal}
        />
      </View>
      <NavigationModal
        isVisible={isVisibleStepsModal}
        setIsVisible={setIsVisibleModal}
        steps={steps}
        onStepSelect={goToStep}
      />
    </>
  );
}

const MemorizedStepSelector = memo(StepSelector);
export {MemorizedStepSelector as StepSelector};
