import { MajorScale, MinorScale, chromaticScale } from "./scale.mjs";

function scaleFrom(tonic, scale) {
    switch (scale) {
    case 'major':
        return MajorScale(tonic);
    case 'minor':
        return MinorScale(tonic);
    default:
        throw new Error('how this happen')
    }
}

function formChanged(form) {
    const formData = new FormData(form);
    const scale = scaleFrom(formData.get('tonic'), formData.get('scale'));
    ['tonic', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
        Array.from(form.getElementsByClassName(c)).forEach(elt => elt.innerText = scale[i]);
    });

    // todo: memoize this or put it in the scales module.
    const allScales = chromaticScale.flatMap(tonic => {
        return [MajorScale(tonic), MinorScale(tonic)];
    })

    const availableScales =
        allScales.reduce((acc, s, i) => {
            const suffix = i % 2 == 0 ? '' : 'm';
            if (scale.includes(s.tonic) && scale.includes(s.third) && scale.includes(s.fifth)) {
                return acc.concat(`${s.tonic}${suffix}`);
            }
            return acc;
        }, []);
    Array.from(form.getElementsByClassName('chords')).forEach(list => {
        const items = availableScales.map(s => {
            const elt = document.createElement('li');
            elt.innerText = s;
            return elt;
        });
        list.replaceChildren();
        items.forEach(item => list.appendChild(item));
    });
}

function handleFormChanged(e) {
    formChanged(e.target.form);
}

export default function KeyPicker(form) {
    console.debug('KeyPicker()', form);
    form.onchange = handleFormChanged;
    formChanged(form);
}