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

// assume A440 tuning
const noteA = Note.fromString('A');
let player = undefined;

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

function changed({ detail }) {
    console.debug('got changedEvent', detail.notes);
    const played = detail.notes.map((n, i) => {
        if (n !== 'x') {
            return [Note.fromString(n), detail.octaves[i]];
        }
    }).filter(n => n);

    const getOffsets = () => {
        return played.map(([n, o]) =>  toCents([noteA, 4], [n, o]));
    }
    player = document.querySelector('x-player');
    player.getOffsets = getOffsets;
    player.update();
}

function play({ detail }) {
    console.debug('got playEvent', detail.notes);
    if (player) {
        player.isPlaying = true;
    }
}

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

function noteEnter({ detail }) {
    console.debug('got noteEnter', detail);
    Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
        .map(f => f.parentNode)
        .forEach(f => f.classList.add('hover'));
}

function noteLeave({ detail }) {
    console.debug('got noteLeave', detail);
    Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
        .map(f => f.parentNode)
        .forEach(f => f.classList.remove('hover'));
}

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

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

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

        changed({ detail: f });
    });

    document.querySelectorAll(KeyPicker.name).forEach(kp => {
        kp.addEventListener(kp.noteEnterEvent, noteEnter);
        kp.addEventListener(kp.noteLeaveEvent, noteLeave);
    });
}
document.addEventListener('DOMContentLoaded', init);