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

/**
 * The Photos app's operator settings: folders, and nothing else.
 *
 * Photos was always several folders (docs/MESHBAY_DESIGN.md §9.9) — a photo library
 * is routinely scattered, with no single natural root — so this pane is what
 * the other two grew into rather than the exception it used to be. No
 * third-party service: EXIF is read locally on the node, and nothing about a
 * photo leaves the machine to be identified.
 */
function PhotoSettings({ roots, dirs, settings, saveDirectories }) {
  const { busy, msg, run } = useSaver();
  const [directories, setDirectories] = useState(settings.photoDirectories || []);
  useEffect(() => {
    setDirectories(settings.photoDirectories || []);
  }, [settings.photoDirectories]);

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

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

      <button class="app-save" disabled=${busy || !dirty}
        onClick=${() => run(() => saveDirectories(directories))}>
        ${busy ? t('settings_app.saving') : t('settings_app.save')}
      </button>
      ${msg && html`<p class="settings-hint">${msg}</p>`}
    </div>
  `;
}

export { PhotoSettings };