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

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

  return (
    <ItemPicker
      items={nationalities}
      selection={selectedNationality}
      label={translations.QSM.NATIONALITY_LABEL}
      placeholder={translations.QSM.NATIONALITY_PLACEHOLDER}
      classModifier="travel-class-picker__items"
      onPick={(picked) => dispatch(setSelectedNationality(picked))}
    />
  );
};

export default TravelNationalityPicker;