import React, { useContext } from "react";
import { useSelector } from "react-redux";
import { buildClassName } from "../../shared/utils/class-util";
import { selectTranslations } from "../features/booking/selectors";
import SettingsContext from "../settings-context";

interface StepIndicatorsProps {
  currentStep: number;
}

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

  const allSteps = [];
  if (!flightOptions.isHidden) {
    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
  }
  if (!roomOptions.isHidden) {
    allSteps.push(translations.STEPS.ROOM_OPTIONS);
  }

  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
  allSteps.push(translations.STEPS.PERSONAL_DETAILS);
  allSteps.push(translations.STEPS.SUMMARY);
  allSteps.push(translations.STEPS.CONFIRMATION);

  return (
    <div className="step-indicators">
      <div className="step-indicators__items">
        {allSteps.map((stepName, index) => (
          <div
            key={`${index + 1}-${stepName}`}
            className={buildClassName([
              "step-indicators__item",
              currentStep === index + 1 && "step-indicators__item--active",
              currentStep > index + 1 && "step-indicators__item--completed",
            ])}
          >
            <div className="step-indicators__icon step-indicators__icon">
              {index + 1}
            </div>
            <div className="step-indicators__text">{stepName}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StepIndicators;