import React from 'react';

import Settings from 'utils/Settings';
import Languages from 'utils/Languages';

export default class Popup extends React.Component {
  constructor(props) {
    super(props);

    this.onEnabledChanged = this.onEnabledChanged.bind(this);
    this.onLanguageChanged = this.onLanguageChanged.bind(this);

    this.state = {
      isWorking: false,
      enabled: null,
      language: null
    };
  }
  componentWillMount() {
    this.setState({ isWorking: true });

    Settings.get().then(settings => this.setState({ isWorking: false, ...settings }));
  }
  onEnabledChanged(event) {
    const enabled = event.currentTarget.checked;

    this.updateSettings({ enabled });
  }
  onLanguageChanged(event) {
    const language = event.currentTarget.value;

    this.updateSettings({ language });
  }
  updateSettings(settings) {
    this.setState({ isWorking: true });

    Settings.set(settings).then(() => this.setState({ isWorking: false, ...settings }));
  }
  render() {
    const { isWorking } = this.state;
    const languages = Languages.getAvailable();

    return <div>
      <div className='settings__row'>
        <h2>Mean Facebook</h2>
      </div>

      <div className='settings__row'>
        <label>
          <input type='checkbox' checked={this.state.enabled} onChange={this.onEnabledChanged}/> Enabled
        </label>
      </div>

      <div className='settings__row'>
        <label>
          Language:
        </label>

        <select
          disabled={isWorking}
          onChange={this.onLanguageChanged}
          value={this.state.language}>
          <option key='auto' value='auto'>Your Facebook language</option>
          {languages.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
        </select>
      </div>

      <aside>You need to refresh the page after you change the settings.</aside>
    </div>;
  }
}

@@ -1079,16 +1079,218 @@
 lable();
+%0A    const isAuto = this.state.language === 'auto';%0A    const fallbackLanguageCode = Languages.getFirstSupportedFallbackLanguageCode();%0A    const fallbackLanguage = Languages.find(fallbackLanguageCode);
 %0A%0A    re
@@ -1841,30 +1841,28 @@
 to'%3E
-Your Facebook language
+Automatically detect
 %3C/op
@@ -1999,16 +1999,16 @@
 select%3E%0A
-
       %3C/
@@ -2009,24 +2009,309 @@
     %3C/div%3E%0A%0A
+      %7BisAuto && %3Cdiv className='settings__row'%3E%0A        %3Caside%3E%0A          When auto is selected this add-on will try to guess the language from the posts on your facebook.%0A          If that fails the language will fall back to %7BfallbackLanguage.name%7D.%0A        %3C/aside%3E%0A      %3C/div%3E%7D%0A%0A
       %3Caside

Add a message to popup explaining the auto language detection mechanism