/* global React, WTi18n */
const { useEffect, useState } = React;

function LanguageSwitch() {
  const [loc, setLoc] = useState(() => (window.WTi18n && WTi18n.current) || 'ru');

  useEffect(() => {
    const onChange = (e) => setLoc(e.detail.locale);
    window.addEventListener('wt:locale', onChange);
    return () => window.removeEventListener('wt:locale', onChange);
  }, []);

  const set = (l) => () => window.WTi18n && WTi18n.setLocale(l);

  return (
    <div className="wt-lang-switch" role="group" aria-label="Language">
      <button data-set-lang="ru" onClick={set('ru')} className={loc === 'ru' ? 'is-active' : ''} data-i18n="lang.ru">Рус</button>
      <button data-set-lang="en" onClick={set('en')} className={loc === 'en' ? 'is-active' : ''} data-i18n="lang.en">Eng</button>
    </div>
  );
}

window.LanguageSwitch = LanguageSwitch;