import CSVDump from './csv-dump.mjs';

const worker = new Worker('worker.js', { type: 'module' });

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

    get form() {
        return this.querySelector('form');
    }

    get ignoreHeader() {
        return this.form.querySelector('input[name="ignore-header"]').checked;
    }

    get stripChevron() {
        return this.form.querySelector('input[name="strip-chevron"]').checked;
    }

    get threshold() {
        return Number(this.form.querySelector('input[name="pni-threshold"]').value);
    }

    get files() {
        const inputs = Array.from(this.form.querySelectorAll('input[type="file"]'));
        return inputs.flatMap(inp => Array.from(inp.files));
    }

    get downloadButton() {
        return this.querySelector('#csv-download');
    }

    get resultTable() {
        return document.getElementById('pnit-results');
    }

    connectedCallback() {
        console.debug('PNITForm#connectedCallback', this);

        worker.onmessage = this.handleWorkerMessage.bind(this);
        worker.onmessageerror = this.handleWorkerMessageError.bind(this);
        worker.onerror = this.handleWorkerError.bind(this);

        this.form.onchange = this.process.bind(this);
        this.form.onchange();

        this.downloadButton.onclick = _ => {
            const dumper = new CSVDump(this.results);
            dumper.download();
        }
    }

    handleWorkerMessage(e) {
        const row = document.createElement('tr');
        e.data.forEach(v => {
            const col = document.createElement('td');
            col.innerText = v;
            row.appendChild(col);
        });
        this.results.push(e.data);
        this.resultTable.appendChild(row);
    }

    handleWorkerMessageError(e) {
        console.error('onmessageerror', e);
    }

    handleWorkerError(e) {
        console.error('onerror', e);
    }

    process() {
        console.debug('PNITForm#process', this);

        this.results = [];
        this.resultTable.innerHTML = '';

        if (isNaN(this.threshold)) {
            console.error('threshold invalid');
            return;
        }
        this.files.forEach(file => {
            worker.postMessage({
                stripChevron: this.stripChevron,
                ignoreHeader: this.ignoreHeader,
                threshold: this.threshold,
                file
            });
        });
    }
}