import $ from "./jquery.module.js";
import set_config_class from "./set_config_class.js";

let setConfigPromise = new set_config_class();
let config_options;
let config_video;
let currentLanguage = 1;
let playing = false;
let nextPage;
function setConfig(config)  {
    setConfigPromise.setConfig(config)
}

function playVideo() {
    let vid = $("video") ;
    let aud =  $("audio") ;
    $("#title").remove();
    $(`#layer1`).css({"background-image": "none", "background-color":"black"}) ;
    // For bilingual videos there are two possible formats for config_video:
    //    file:   "...",
    //    audio1: "...",
    //    audio2: "..."
    // which is the format if the video is muted and there are two bilingual soundtracks.
    // The other possibility is:
    //    file1: "...",
    //    file2: "..."
    // which is used if there are two videos with different soundtracks
    if ("audio1" in config_video && "audio2" in config_video) {
        switch (currentLanguage) {
            case 1:
                $(aud).attr("src", config_video.audio1)
                break;

            case 2:
                $(aud).attr("src", config_video.audio2)
                break;

        }
        $(vid).attr("src", config_video.file).removeClass("d-none")[0].play();
        $(aud)[0].play();
    }
    else if ("file1" in config_video && "file2" in config_video) {
        switch (currentLanguage) {
            case 1:
                $(vid).attr("src", config_video.file1)
                break;

            case 2:
                $(vid).attr("src", config_video.file2)
                break;

        }
        $(vid).removeClass("d-none")[0].play();
    } else {
        // assume there is just one file with its own audio track
        // we ignore currentLanguage in this case
        $(vid).attr("src", config_video.file).removeClass("d-none")[0].play();
    }
    playing = true;
}

/*
   IF LANGUAGE 1 IS SELECTED, SWITCHES AUDIO AND TEXT TO LANGUAGE 2 AND RESTARTS VIDEO
   IF LANGUAGE 2 IS SELECTED, SWITCHED AUDIO AND TEXT TO LANGUAGE 1 AND RESTARTS VIDEO
 */

function switchLanguages() {
    let vid = $("video");
    let aud = $("audio");
    if (currentLanguage === 1) {
        currentLanguage = 2;
        $(".lang1").addClass("d-none");
        $(".lang2").removeClass("d-none");
        if (!playing) {
            return;
        }
        $(vid)[0].pause();
        $(vid)[0].currentTime = 0
        $(aud)[0].pause();
        $(aud).attr("src", config_video.audio2)
        $(vid)[0].play();
        $(aud)[0].play();

    } else if (currentLanguage === 2) {
        currentLanguage = 1;
        $(".lang2").addClass("d-none");
        $(".lang1").removeClass("d-none");
        if (!playing) {
            return;
        }
        $(vid)[0].pause();
        $(vid)[0].currentTime = 0
        $(aud)[0].pause();
        $(aud).attr("src", config_video.audio1)
        $(vid)[0].play();
        $(aud)[0].play();

    }
}

$(() => {
    setConfigPromise.then((config) => {
        config_options = config.options;
        config_video = config.video;

        let $mainDisplay = $(`#layer1`);

        if ("bkImage" in config_options) {
            $mainDisplay.css("background-image", `url(${config_options.bkImage})`);
        }

        if ("title" in config_options) {
            $mainDisplay.append(`<div id="title" class="text-center bubble p-5"><span class="lang1">${config_options.title}</span><span class="lang2 d-none">${config_options.title2}</span></div>`);
            document.title = config_options.title;
        }

        if ("video_dimensions" in config_options) {
            $("#main video").css(config_options.video_dimensions);
        }

        $("video source").attr("src", config_video.file);

        $("#play_button").on("click", function(){
            $(this).remove() ;
            playVideo();
            nextPage = config_options.completionURL ;
        });
        $(".lang").on("click", function(){
         switchLanguages() ;
        });
        $("#play1").html(config_options.play1) ;
        let el = document.getElementById('play2');
        if (el !== null) {
            $("#play2").html(config_options.play2) ;
        }
        $("video").on('ended',function(){
            window.location.href = nextPage;
        });
        if ("audio1" in config_video) {
            $("body").append(`<audio id="audioForVideo" src="${config_video.audio1}" >`);
        }

        if ("audio2" in config_video) {
            // Support two languages
            $("#lang").removeClass("d-none").on("click", switchLanguages);
        }
    });

});

export {setConfig};