import { normalizeLanguage } from '../lib/settings.js';

export const MENU_SETTING_KEYS = ['contextMenuMode', 'showTranslate', 'translationMode', 'translationLanguage'];
export function initializeMenuSettings({ document, onChange }) {
  const field = id => document.getElementById(id);
  function update() {
    const advanced = field('contextMenuMode').value === 'advanced';
    const translation = advanced && field('showTranslate').checked;
    const preferred = translation && field('translationMode').value === 'preferred';
    field('advanced-settings').hidden = !advanced;
    field('translation-settings').hidden = !translation;
    field('preferred-language-field').hidden = !preferred;
    const valid = Boolean(normalizeLanguage(field('translationLanguage').value));
    field('language-validation').textContent = preferred && !valid
      ? 'Enter a language using up to 100 characters. Until then, Translate will ask each time.' : '';
    field('translationLanguage').setAttribute('aria-invalid', String(preferred && !valid));
  }
  for (const id of MENU_SETTING_KEYS) {
    const changed = () => { update(); onChange(); };
    field(id).addEventListener('input', changed);
    field(id).addEventListener('change', changed);
  }
  return {
    render(settings) {
      for (const id of MENU_SETTING_KEYS) {
        const element = field(id);
        if (element === document.activeElement) continue;
        if (id === 'showTranslate') element.checked = settings[id];
        else element.value = settings[id];
      }
      update();
    },
    collect() {
      return {
        contextMenuMode: field('contextMenuMode').value,
        showTranslate: field('showTranslate').checked,
        translationMode: field('translationMode').value,
        translationLanguage: normalizeLanguage(field('translationLanguage').value),
      };
    },
  };
}