import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
import SettingsContext from '../settings-context';
import SharedStepIndicators from '../../shared/booking/step-indicators';

interface StepIndicatorsProps {
  currentStep: number;
}

const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
  const { flightOptions, roomOptions } = useContext(SettingsContext);
  const translations = useSelector(selectTranslations);
  const travelersFirstStep = useSelector(selectTravelersFirstStep);

  const stepLabels: string[] = [];
  if (travelersFirstStep) {
    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
  }
  if (!flightOptions.isHidden) {
    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
  }
  if (!roomOptions.isHidden) {
    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
  }
  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
  if (!travelersFirstStep) {
    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
  }
  stepLabels.push(translations.STEPS.SUMMARY);
  stepLabels.push(translations.STEPS.CONFIRMATION);

  return <SharedStepIndicators currentStep={currentStep} stepLabels={stepLabels} />;
};

export default StepIndicators;