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

interface StepRouteProps {
  number: number;
  title: string;
  component: JSX.Element;
}

const StepRoute: React.FC<StepRouteProps> = ({ number, title, component }) => {
  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 (
    <BookingPanel
      currentStep={number}
      stepLabels={stepLabels}
      StepIndicatorsComponent={StepIndicators}
      renderTitle={(step) => (
        <>
          {step + 1}. {stepLabels[step]}
        </>
      )}>
      {component}
    </BookingPanel>
  );
};

export default StepRoute;