export default class EpisodeContainer extends HTMLElement {
    H264_CODECS = ['h264', 'h.264', 'x264']
    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']

    #resultsToggleBtnEl;
    #resultsTableEl;
    #resultsCountBadgeEl;
    #resultsCountNumberEl;

    constructor() {
        super();
        this.#resultsTableEl = this.querySelector('.results-container');
        this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
        this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
        this.#resultsCountNumberEl = this.querySelector('.results-count-number');

        this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
        this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());

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

    }

    // attribute change
    attributeChangedCallback(property, oldValue, newValue) {
        if (oldValue === newValue) return;
        this[ property ] = newValue;
    }

    static get observedAttributes() {
        return ['name'];
    }

    toggleResults() {
        this.#resultsToggleBtnEl.classList.toggle('rotate-90');
        this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
        this.#resultsTableEl.classList.toggle('hidden');
    }

    filter({ detail: { activeFilter } }) {
        const options = this.querySelectorAll('tr.download-option');

        let firstIncluded = true;
        let count = 0;
        let selectedCount = 0;

        options.forEach((option) => {
            const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
            const props = {
                "resolution": option.querySelector('#resolution').textContent.trim(),
                "codec": option.querySelector('#codec').textContent.trim(),
                "provider": option.querySelector('#provider').textContent.trim(),
                "languages": JSON.parse(option.dataset['languages']),
                "quality": option.dataset['quality'],
            }

            let include = true;
            option.classList.add('r-tablerow');
            option.classList.remove('hidden');
            optionHeader.classList.add('r-tablerow');
            optionHeader.classList.remove('hidden');
            option.querySelector('input[type="checkbox"]').checked = false;

            for (let [key, value] of Object.entries(activeFilter)) {
                if (value === "" || key === "season") {
                    continue;
                }
                if (key === "codec" && value === "h264") {
                    if (!this.H264_CODECS.includes(props[key].toLowerCase())) {
                        include = false;
                    }
                } else if (key === "codec" && value === "h265") {
                    if (!this.H265_CODECS.includes(props[key].toLowerCase())) {
                        include = false;
                    }
                } else if (key === "language") {
                    if (!props["languages"].includes(value)) {
                        include = false;
                    }
                } else if (props[key] !== value) {
                    include = false;
                }
            }

            if (false === include) {
                option.classList.remove('r-tablerow');
                option.classList.add('hidden');
                optionHeader.classList.remove('r-tablerow');
                optionHeader.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;
        });
    }
}