import Fretboard from './fretboard.mjs';
import History from './history.mjs';
import KeyPicker from './key-picker.mjs';
import String from './string.mjs';
import Player from './player.mjs';
import { Note, toCents } from './scale.mjs';

function init() {
    console.debug('init()', this);

    String.register();
    Fretboard.register();
    KeyPicker.register();
    History.register();

    let player = undefined;

    // todo: maybe just attach the listener to document?
    document.querySelectorAll(Fretboard.name).forEach(f => {
        f.addEventListener(f.saveEvent, e => {
            document.querySelectorAll(History.name).forEach(h => {
                console.debug('h is', h, 'e is', e.detail);
                h.add(e.detail);
            });
        });

        f.addEventListener(f.playEvent, e => {
            console.debug('got playEvent', e, e.detail.notes);
            const a = Note.fromString('A');
            if (player) {
                player.stop();
            }
            player = new Player(e.detail.notes.filter(n => n !== 'x').map(n => {
                // smoosh everything into 4 right now
                return toCents([a, 4], [Note.fromString(n), 4]);
            }));
            player.start();
        });

        f.addEventListener(f.stopEvent, e => {
            console.debug('got stopEvent', e);
            if (player) {
                player.stop();
            }
        });
    });
}
document.addEventListener('DOMContentLoaded', init);