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

    #downloadBtnEl;
    #selectEpisodeInputEl;

    url;
    size;
    quality;
    resolution;
    codec;
    seeders;
    provider;
    languages;
    mediaType;
    season;
    episode;
    filename;
    imdbId;
    episodeId;
    mediaTitle;

    constructor() {
        super();
        this.url = this.getAttribute('url');
        this.size = this.getAttribute('size');
        this.quality = this.getAttribute('quality');
        this.resolution = this.getAttribute('resolution');
        this.codec = this.getAttribute('codec');
        this.seeders = this.getAttribute('seeders');
        this.provider = this.getAttribute('provider');
        this.filename = this.getAttribute('filename');
        this.imdbId = this.getAttribute('imdb-id');
        this.languages = JSON.parse(this.getAttribute('languages'));
        this.mediaType = this.getAttribute('media-type');
        this.mediaTitle = this.getAttribute('media-title');
        this.season = this.getAttribute('season') ?? null;
        this.episode = this.getAttribute('episode') ?? null;
        this.episodeId = this.getAttribute('episode-id') ?? null;
        this.#downloadBtnEl = this.querySelector('.download-btn');
        this.#selectEpisodeInputEl = this.querySelector('input[type="checkbox"]');

        this.#downloadBtnEl.addEventListener('click', () => this.download());
    }
    get isSelected() {
        return this.#selectEpisodeInputEl.checked;
    }

    set isSelected(value) {
        this.#selectEpisodeInputEl.checked = value;
    }

    filter({ detail: { activeFilter } }) {
        const optionHeader = document.querySelector(`[data-option-id="${this.dataset['localId']}"]`)
        const props = {
            "resolution": this.resolution.trim(),
            "codec": this.codec.trim(),
            "provider": this.provider.trim(),
            "languages": this.languages,
            "quality": this.quality,
        }

        let include = true;
        this.classList.add('r-tablerow');
        this.classList.remove('hidden');
        optionHeader.classList.add('r-tablerow');
        optionHeader.classList.remove('hidden');

        this.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) {
            this.classList.remove('r-tablerow');
            this.classList.add('hidden');
            optionHeader.classList.remove('r-tablerow');
            optionHeader.classList.add('hidden');
        }

        return include;
    }

    download() {
        fetch('/api/download', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                url: this.url,
                title: this.mediaTitle,
                filename: this.filename,
                mediaType: this.mediaType,
                imdbId: this.imdbId,
                episodeId: this.episodeId
            })
        })
            .then(res => res.json())
            .then(json => {
                console.log(json)
            })
    }
}