import React, { useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { QSMRootState } from '../../store/qsm-store';
import { setSelectedTravelClass } from '../../store/qsm-slice';
import QSMConfigurationContext from '../../qsm-configuration-context';
import ItemPicker from '../item-picker';
import { getTranslations } from '../../../shared/utils/localization-util';

const TravelClassPicker: React.FC = () => {
  const { travelClasses, languageCode } = useContext(QSMConfigurationContext);
  if (!travelClasses || travelClasses.length === 0) return null;
  const translations = getTranslations(languageCode ?? 'en-GB');
  const { selectedTravelClass } = useSelector((state: QSMRootState) => state.qsm);
  const dispatch = useDispatch();

  return (
    <ItemPicker
      items={travelClasses}
      selection={selectedTravelClass}
      label={translations.QSM.TRAVEL_CLASS_LABEL}
      placeholder={translations.QSM.TRAVEL_CLASS_PLACEHOLDER}
      classModifier="travel-class-picker__items"
      onPick={(picked) => dispatch(setSelectedTravelClass(picked))}
    />
  );
};

export default TravelClassPicker;