import { html, useState, useEffect } from './vendor/htm-preact.js';
import { t, getLocale, LOCALES } from './i18n.js';
import { ToggleSwitch, useSaver } from './settings-ui.js';
import { FolderPickerField } from './folder-tree.js';

// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB
// expects. Duplicated from nothing: this is the only place it lives now that
// the TMDB fields moved out of the monolithic settings page.
const TMDB_LANGUAGE_BY_LOCALE = {
  en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN',
  ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL',
};

/**
 * The Videos app's operator settings: which folders it works over, and the
 * TMDB lookups it makes.
 *
 * Several folders now, not one. A film library is as likely to be two drives
 * as one, and the single-root model made the second one invisible — the
 * operator's only recourse was to point Videos at a parent containing both,
 * which pulls in everything else under it too.
 *
 * The TMDB parts are two independent settings that happen to sit together:
 * the on/off switch is per group, while the API key and the query language
 * are node-wide, because they are one operator's credential and one shared
 * cache (docs/mediacenter.md §5.5). They save separately for that reason.
 */
function VideoSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
  const { busy, msg, run } = useSaver();
  const [directories, setDirectories] = useState(settings.videoDirectories || []);
  const [tmdbEnabled, setTmdbEnabled] = useState(settings.tmdbEnabled !== false);
  const [token, setToken] = useState('');
  const [language, setLanguage] = useState(
    settings.tmdbLanguage || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US');

  useEffect(() => {
    setDirectories(settings.videoDirectories || []);
  }, [settings.videoDirectories]);
  useEffect(() => {
    setTmdbEnabled(settings.tmdbEnabled !== false);
  }, [settings.tmdbEnabled]);
  useEffect(() => {
    if (settings.tmdbLanguage) setLanguage(settings.tmdbLanguage);
  }, [settings.tmdbLanguage]);

  const current = settings.videoDirectories || [];
  const dirsDirty = directories.length !== current.length
    || directories.some((d, i) => d !== current[i]);

  return html`
    <div class="app-settings">
      <${FolderPickerField}
        label=${t('settings_app.video_directories_label')}
        hint=${t('settings_app.video_directories_hint')}
        roots=${roots} dirs=${dirs} mode="multi"
        value=${directories} disabled=${busy}
        onChange=${setDirectories} />

      <button class="app-save" disabled=${busy || !dirsDirty}
        onClick=${() => run(() => saveDirectories(directories))}>
        ${busy ? t('settings_app.saving') : t('settings_app.save')}
      </button>

      <h4 class="app-settings-sub">${t('settings_node.tmdb_title')}</h4>
      <p class="settings-hint">${t('settings_node.tmdb_hint')}</p>

      <div class="settings-row">
        <${ToggleSwitch} checked=${tmdbEnabled} disabled=${busy}
          onChange=${(v) => { setTmdbEnabled(v);
                              run(() => transport.setTmdbEnabled(v, signFn)); }}
          label=${tmdbEnabled ? t('settings_node.tmdb_enabled')
                              : t('settings_node.tmdb_disabled')} />
      </div>

      <div class="settings-row">
        <label class="settings-label">
          ${t('settings_node.tmdb_token_label')}
          <input type="password" value=${token} disabled=${busy}
            placeholder=${t('settings_node.tmdb_token_placeholder')}
            onInput=${(e) => setToken(e.target.value)} />
        </label>
        ${/* No "optional", and no mention of a shipped default. A key that
              works without one is a key somebody else is paying the rate
              limit for, and the operator should know they are meant to have
              their own. */''}
        <p class="settings-hint">
          ${settings.tmdbTokenCustomized
            ? t('settings_node.tmdb_token_customized')
            : t('settings_app.tmdb_token_prompt')}
          ${' '}
          <a href="https://www.themoviedb.org/settings/api" target="_blank"
             rel="noopener noreferrer">${t('settings_app.tmdb_token_link')}</a>
        </p>
      </div>

      <div class="settings-row">
        <label class="settings-label">
          ${t('settings_node.tmdb_language_label')}
          <select value=${language} disabled=${busy}
            onChange=${(e) => setLanguage(e.target.value)}>
            ${LOCALES.map((l) => html`
              <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}>
                ${l.name}
              </option>`)}
          </select>
        </label>
        <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p>
      </div>

      ${/* The same control as the one above it. Two Save buttons in one pane
            that do not look alike is worse than either looking wrong. This one
            is never inert: the language always has a value to send, and an
            empty token means "leave the stored one alone", not "no change". */''}
      <button class="app-save" disabled=${busy}
        onClick=${() => run(async () => {
          // `undefined` for the token means "leave the stored one alone",
          // which is not the same as `''` — that clears it. The input starts
          // empty on every render because a secret is not read back, so
          // sending it as a value would wipe the key every time the language
          // was changed.
          await transport.setTmdbConfig(token || undefined, language, signFn);
          setToken('');
        })}>
        ${busy ? t('settings_app.saving') : t('settings_node.tmdb_save')}
      </button>
      ${msg && html`<p class="settings-hint">${msg}</p>`}
    </div>
  `;
}

export { VideoSettings, TMDB_LANGUAGE_BY_LOCALE };