export default class MovieContainer extends HTMLElement {
    #resultsTableEl;
    #resultsCountNumberEl;

    constructor() {
        super();
        this.#resultsTableEl = this.querySelector('.results-container');
        this.#resultsCountNumberEl = document.querySelector('.results-count-number');

        document.addEventListener('filterDownloadOptions', this.filter.bind(this));
    }

    filter({ detail: { activeFilter } }) {
        const options = this.querySelectorAll('tr.download-option');
        let firstIncluded = true;
        let count = 0;
        let selectedCount = 0;

        options.forEach((option) => {
            const include = option.filter({ detail: { activeFilter: activeFilter } });

            if (false === include) {
                option.classList.remove('r-tablerow');
                option.classList.add('hidden');
            } else if (true === firstIncluded) {
                count = 1;
                selectedCount = selectedCount + 1;
                option.querySelector('input[type="checkbox"]').checked = true;
                firstIncluded = false;
            } else {
                count = count + 1;
            }
        });
        this.#resultsCountNumberEl.innerText = count;
    }
}