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

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

  return (
    <ItemPicker
      items={travelTypes}
      selection={selectedTravelType}
      label={translations.QSM.TRAVEL_TYPE_LABEL}
      placeholder={translations.QSM.TRAVEL_TYPE_PLACEHOLDER}
      classModifier="travel-type-picker__items"
      onPick={(picked) => dispatch(setSelectedTravelType(picked))}
    />
  );
};

export default TravelTypePicker;
