"use strict";

class FormatSelector {
    constructor() {
        this.query_selector = '#modal-format-selector';
        this.addEventListeners();
    }

    appendFormat(container, object, is_video, callback) {
        let a = document.createElement('a');
        if ( is_video ) {
            a.innerText = 'Id: ' + object.id + "\n"
                + 'Format: ' + object.mimeType + "\n"
                + 'QualityLabel: ' + object.qualityLabel + "p\n"
                + 'Bitrate: ' + object.bitrate + "\n"
                + (
                    ( object.audioSampleRate !== undefined ) ?
                        'AudioSampleRate: ' + object.audioSampleRate + ".\n" :
                        "No audio."
                );
        } else {
            a.innerText = 'Id: ' + object.id + "\n"
                + 'Format: ' + object.mimeType + "\n"
                + 'AudioSampleRate: ' + object.audioSampleRate + "\n"
                + 'Bitrate: ' + object.bitrate + ".\n";
        }
        a.addEventListener( 'click', (event) => {
            callback(object.id);
        });
        container.appendChild(a);
    }

    prepareFormatSelector(title, description, audio_formats, video_formats, callback) {
        this.titleFormatSelector.innerText = title;
        this.descriptionFormatSelector.innerText = description;
        this.videoFormats.innerHTML = '';
        this.audioFormats.innerHTML = '';
        for ( let x of audio_formats) {
            this.appendFormat(this.audioFormats, x, false, callback);
        }
        for ( let x of video_formats ) {
            this.appendFormat(this.videoFormats, x, true, callback);
        }
    }

    setVisible(option) {
        if (option) {
            this.element.classList.add('active');
        } else {
            this.element.classList.remove('active');
        }
    }

    addEventListeners() {
        this.closeFormatSelector.addEventListener('click', (event) => { this.setVisible(false); });
    }

    get videoFormats() {
        return this.element.querySelector('.video-formats');
    }
    
    get audioFormats() {
        return this.element.querySelector('.audio-formats');
    }

    get titleFormatSelector() {
        return this.element.querySelector('h2');
    }

    get descriptionFormatSelector() {
        return this.element.querySelector('p');
    }

    get closeFormatSelector() {
        return this.element.querySelector('#close-modal-format-selector');
    }

    get element() {
        return document.querySelector(this.querySelector);
    }

    get querySelector() {
        return this.query_selector;
    }
}

export { FormatSelector };