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

/**
 * The Music app's operator settings.
 *
 * Same shape as Videos, minus a credential: MusicBrainz's read endpoints need
 * no API key, only a descriptive User-Agent, and that is one operator identity
 * held node-wide rather than a per-group setting (docs/musicbay.md §3.2).
 *
 * Several folders, for the same reason Videos has several: a music library
 * that lives on two drives had no way to say so.
 */
function MusicSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
  const { busy, msg, run } = useSaver();
  const [directories, setDirectories] = useState(settings.musicDirectories || []);
  const [mbEnabled, setMbEnabled] = useState(settings.musicbrainzEnabled !== false);

  useEffect(() => {
    setDirectories(settings.musicDirectories || []);
  }, [settings.musicDirectories]);
  useEffect(() => {
    setMbEnabled(settings.musicbrainzEnabled !== false);
  }, [settings.musicbrainzEnabled]);

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

  return html`
    <div class="app-settings">
      <${FolderPickerField}
        label=${t('settings_app.music_directories_label')}
        hint=${t('settings_app.music_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.musicbrainz_title')}</h4>
      <p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
      <div class="settings-row">
        <${ToggleSwitch} checked=${mbEnabled} disabled=${busy}
          onChange=${(v) => { setMbEnabled(v);
                              run(() => transport.setMusicbrainzEnabled(v, signFn)); }}
          label=${mbEnabled ? t('settings_node.musicbrainz_enabled')
                            : t('settings_node.musicbrainz_disabled')} />
      </div>
      ${msg && html`<p class="settings-hint">${msg}</p>`}
    </div>
  `;
}

export { MusicSettings };