export default class extends HTMLElement {
    static name = 'x-chords-history'
    static register() {
        console.debug('Registering Element', this.name, this);
        customElements.define(this.name, this);
    }

    delayMs = 1000;
    #list

    oldList = [
        'GCEGCE',
        'EBEGBE'
    ];

    constructor() {
        super();

        console.debug('History#constructor', this);
        this.onClick = e => console.debug('history click', e);
    }

    connectedCallback() {
        console.debug('History#connectedCallback', this);
        this.template = this.querySelector('template');
        this.list = this.querySelector('ol');

        // mess around with custom states
        this._internals = this.attachInternals();
    }

    add(fretboard) {
        console.debug('History#add', this, fretboard);
        this._internals.states.add('fresh');
        setTimeout(_ => this._internals.states.delete('fresh'),
            this.delayMs);

        const item = this.template.content.cloneNode(true);
        // TODO: i don't think this is how slots are supposed to work,
        // but maybe they're not really for this at all?
        item.querySelectorAll('[name="fretboard"]')
            .forEach(s => s.textContent = fretboard.notes.join(' '));
        this.list.appendChild(item);
    }
}