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';

let player = undefined;

function save(e) {
    document.querySelectorAll(History.name).forEach(h => {
        console.debug('h is', h, 'e is', e.detail);
        h.add(e.detail);
    });
}

function play(e) {
    console.debug('got playEvent', e, e.detail.notes);
    if (player) {
        player.stop();
    }

    const played = e.detail.notes.map((n, i) => {
        if (n !== 'x') {
            return [Note.fromString(n), e.detail.octaves[i]];
        }
    }).filter(n => n);

    const a = Note.fromString('A');
    player = new Player(played.map(([n, o]) => {
        return toCents([a, 4], [n, o]);
    }));
    player.start();
}

function stop(e) {
    console.debug('got stopEvent', e);
    if (player) {
        player.stop();
    }
}

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

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

    // todo: maybe just attach the listener to document?
    document.querySelectorAll(Fretboard.name).forEach(f => {
        f.addEventListener(f.saveEvent, save);
        f.addEventListener(f.playEvent, play);
        f.addEventListener(f.stopEvent, stop);
    });
}
document.addEventListener('DOMContentLoaded', init);