import { useSyncExternalStore } from 'react';
import { midiManager } from '../input/webmidi.ts';
import { keyboardPiano } from '../input/keyboardPiano.ts';

function useMidiState() {
  return useSyncExternalStore(
    (cb) => midiManager.subscribeState(cb),
    () => midiManager.getState(),
  );
}

function useKbdState(): number {
  // encodes enabled+octave so the snapshot is a stable primitive
  return useSyncExternalStore(
    (cb) => keyboardPiano.subscribeState(cb),
    () => (keyboardPiano.enabled ? keyboardPiano.octave : -1),
  );
}

export function DeviceBar() {
  const midi = useMidiState();
  const kbd = useKbdState();
  return (
    <div className="devicebar">
      {midi.supported ? (
        midi.requested && !midi.error ? (
          <>
            <span className={`dot ${midi.inputs.length > 0 ? 'ok' : ''}`} title={midi.inputs.length > 0 ? 'MIDI inputs connected' : 'no MIDI inputs'} />
            <select value={midi.selectedId} onChange={(e) => midiManager.select(e.target.value)} title="MIDI input device">
              <option value="all">All MIDI inputs ({midi.inputs.length})</option>
              {midi.inputs.map((i) => (
                <option key={i.id} value={i.id}>{i.name}</option>
              ))}
            </select>
          </>
        ) : midi.error ? (
          <span className="err" title={midi.error}>MIDI unavailable</span>
        ) : (
          <button onClick={() => void midiManager.request()}>Enable MIDI</button>
        )
      ) : (
        <span className="err">No Web MIDI in this browser</span>
      )}
      <button
        className={kbd >= 0 ? 'toggled' : ''}
        onClick={() => keyboardPiano.setEnabled(kbd < 0)}
        title="Play with the typing keyboard (a..' row; z/x shift octave)"
      >
        {kbd >= 0 ? `Keys: C${kbd}` : 'Keys: off'}
      </button>
    </div>
  );
}