import React, { useState, useEffect } from 'react';
import i18n from '@ohif/i18n';

import './LanguageSwitcher.styl';
import { withTranslation } from '../../contextProviders';

const LanguageSwitcher = () => {
  const getCurrentLanguage = (language = i18n.language) =>
    language.split('-')[0];

  const [currentLanguage, setCurrentLanguage] = useState(getCurrentLanguage());
  const languages = [
    // TODO: list of available languages should come from i18n.options.resources
    {
      value: 'en',
      label: 'English',
    },
    {
      value: 'es',
      label: 'Spanish',
    },
  ];

  const onChange = () => {
    const { value } = event.target;
    const language = getCurrentLanguage(value);
    setCurrentLanguage(language);

    i18n.init({
      fallbackLng: language,
      lng: language,
    });
  };

  useEffect(() => {
    let mounted = true;

    i18n.on('languageChanged', () => {
      if (mounted) {
        setCurrentLanguage(getCurrentLanguage());
      }
    });

    return () => {
      mounted = false;
    };
  }, []);

  return (
    <select
      name="language-select"
      id="language-select"
      className="language-select"
      value={currentLanguage}
      onChange={onChange}
    >
      {languages.map(language => (
        <option key={language.value} value={language.value}>
          {language.label}
        </option>
      ))}
    </select>
  );
};

export default withTranslation('UserPreferencesModal')(LanguageSwitcher);