/* Kildevelgere — PlayerPicker og LibraryPicker.
 * Loaded as a Babel script, etter shared/sources.js (og kilde-registreringene
 * shared/source-spotify.js / shared/source-manual.js). Relies on globals:
 * React, PC (design tokens), window.TaktPlayer, window.TaktLibrary.
 *
 * To små <select>-er over TaktPlayer.list()/TaktLibrary.list(). Er det bare
 * én tilgjengelig kilde i lista, vises en passiv etikett i stedet for en
 * nedtrekksliste med ett valg — det gjelder i praksis alltid LibraryPicker
 * i denne runden, siden Manuell ikke har noen library-halvdel og dermed
 * aldri dukker opp i TaktLibrary.list().
 *
 * Poller aktiv id + lista med jevne mellomrom (samme mønster som
 * shared/spotify-devices.jsx sin innloggingssjekk) — den aktive kilden kan
 * endre seg asynkront, uavhengig av denne komponenten (f.eks. presedenslag 3
 * sin sky-standard som forfremmes til enhetslaget litt etter sideinnlasting,
 * eller et valg gjort et annet sted i UI-et). */

function useSourcePicker(facade) {
  const [activeId, setActiveId] = React.useState(() => facade.active().id);
  const [items,    setItems]    = React.useState(() => facade.list());

  React.useEffect(() => {
    const tick = () => {
      setActiveId(facade.active().id);
      setItems(facade.list());
    };
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [facade]);

  const use = React.useCallback(id => {
    facade.use(id);
    setActiveId(id); // umiddelbar tilbakemelding — neste poll-tick bekrefter
  }, [facade]);

  return { activeId, items, use };
}

const selectStyle = {
  padding: '6px 28px 6px 10px', borderRadius: 5, border: `1px solid ${PC.line2}`,
  background: PC.paper, fontFamily: "'Archivo',sans-serif", fontSize: 12, fontWeight: 600,
  color: PC.ink, outline: 'none', maxWidth: 200, cursor: 'pointer',
};
const passiveStyle = {
  padding: '6px 2px', fontFamily: "'Archivo',sans-serif", fontSize: 12, fontWeight: 600,
  color: PC.muted, whiteSpace: 'nowrap',
};

function SourcePicker({ items, activeId, use, style }) {
  if (items.length <= 1) {
    return <span style={{ ...passiveStyle, ...style }}>{items[0] ? items[0].label : '—'}</span>;
  }
  return (
    <select value={activeId} onChange={e => use(e.target.value)} style={{ ...selectStyle, ...style }}>
      {items.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
    </select>
  );
}

function PlayerPicker({ style }) {
  const { activeId, items, use } = useSourcePicker(window.TaktPlayer);
  return <SourcePicker items={items} activeId={activeId} use={use} style={style} />;
}

function LibraryPicker({ style }) {
  const { activeId, items, use } = useSourcePicker(window.TaktLibrary);
  return <SourcePicker items={items} activeId={activeId} use={use} style={style} />;
}

Object.assign(window, { PlayerPicker, LibraryPicker });