"use strict";

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

    appendFormat(container, object, is_video, callback) {
        let a = document.createElement('a');
        let br = function() { return document.createElement('br') };
        let inner_text = [];
        let muted_video = false;
        if ( is_video ) {
            if ( object.audioSampleRate === undefined ) {
                muted_video = true;
            }
            inner_text.push('Id: ' + object.id);
            inner_text.push(br());
            inner_text.push('Format: ' + object.mimeType);
            inner_text.push(br());
            inner_text.push('QualityLabel: ' + object.qualityLabel + "p");
            inner_text.push(br());
            inner_text.push('Bitrate: ' + object.bitrate); 
            inner_text.push(br());
            inner_text.push( ( muted_video) ?  
                "No audio. " :
                'AudioSampleRate: ' + object.audioSampleRate 
            );
        } else {
            inner_text.push('Id: ' + object.id + "\n");
            inner_text.push(br());
            inner_text.push('Format: ' + object.mimeType);
            inner_text.push(br());
            inner_text.push('AudioSampleRate: ' + object.audioSampleRate);
            inner_text.push(br());
            inner_text.push('Bitrate: ' + object.bitrate);
        }

        a.addEventListener( 'click', (event) => {
            callback(object.id);
        });
        if (muted_video) {
            let img_muted_video = document.createElement('img');
            img_muted_video.classList.add('mute_img');
            img_muted_video.classList.add('scale');
            img_muted_video.src = 'img/audio_muted.svg';
            inner_text.push(img_muted_video);
        }

        for (let text of inner_text) {
            if (typeof text === "string" 
              || text instanceof String) {
                text = document.createTextNode(text);
                a.appendChild(text);
            } else if ( text instanceof Node) {
                a.appendChild(text);
            } else {
                throw ('Text is not a instance of Node nor a String');
            }
        }
 
        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 };