import {shuffle, getShuffledArray} from "./shuffle.js";
import $ from "./jquery.module.js";
import * as dialog from "./dialog.js";
import SetConfig from "./set_config_class.js";
import * as audio from "./audio.js";
import {playAudioFile, setAudioFile} from "./audio.js";
let setConfigHandler = new SetConfig();

function setConfig(config) {
    setConfigHandler.setConfig(config);
}

let config;
let options;
let cards_config ;
let div_array = [] ;
let card_front  ;
let num_cards = 5; // Number of cards to select from array and display ;
let div_add ;

function shuffleCards(cards) {
    if (!options?.randomizeCards) {
        return cards;
    }
    cards = getShuffledArray(cards);
    if (num_cards < cards.length) {
        // Need to make sure distinguished item is included in first num_cards items
        for (let i = 0; i < cards.length; i++) {
            if ("distinguishedItem" in cards[i]) {
                // Swap with first item
                const temp = cards[0];
                cards[0] = cards[i];
                cards[i] = temp;
                break;
            }
        }
        cards = cards.slice(0, num_cards);
        cards = getShuffledArray(cards);
        return cards;
    }

}

function startGame() {
    let cards = shuffleCards(cards_config.card_array);

    for (let i=0; i < num_cards ; i++) {
        // let data_front = `<img src='${cards[i].front.image}' class='card-image' alt='${cards[i].front.alt}'>`;
        let data_front;
        let back= `<img src='${cards[i].back.image}' alt='${cards[i].back.alt}' class='back-img'>`;
        if ("image" in cards[i].front) {
            data_front = `<img src='${cards[i].front.image}' class='card-image' alt='${cards[i].front.alt}'>`;
        } else if ("text" in cards[i].front) {
            data_front = `<p class='card-text'>${cards[i].front.text}</p>`;
        }
        if ("card_front1_caption" in cards[i]) {
            data_front += `<div class='card-caption'>${cards[i].card_front1_caption}</div>`;
        }
        div_add = `<div class="card-div cards"  id ="card${i}" data-card="${i}" data-match="${i}" data-front="${data_front}">${back} </div> `;
        div_array.push(div_add) ;
    }

    // PUTS num_matches RANDOM CARDS IN THE FIRST ROW AND ANOTHER num_matches IN THE SECOND
    if ("absolutePosition" in options) {
        for (let i=0; i < num_cards ; i++){
            let $div = $(div_array[i]);
            let css = cards[i]?.position ?? {};
            css.position = "absolute";
            $div.css(css);
            $("#layer1").append($div) ;
        }
        $(".card-div").css(options.absolutePosition);
    } else {
        for (let i=0; i < num_cards ; i++){
            $("#first_row").append(div_array[i]) ;
        }
    }


    $(".cards").on("click", async function(){
        if( !$(this).hasClass('cards') ) {
            return ;
        }
        card_front = $(this).data('front') ;
        $(this).html(card_front) ;
        const idx = $(this).data('card');
        const card = cards[idx];
        if ("clickSound" in card) {
            audio.playAudioFile(card.clickSound);
        }
        if ("clickMessage" in card) {
            await dialog.showDialogAsync(card.clickMessage);
        }
        if ("distinguishedItem" in cards[idx]) {
           await dialog.showDialogAsync(cards[idx].distinguishedItem.text);
           window.location.href = options.completionURL;
        }
        if ("goToPage" in card)
        {
            window.location.href = card.goToPage;
        }
    });

}

// Use the values assigned in the config.js file in the options object ;
$(async () => {
    config = await setConfigHandler.getConfigAsync();
    options = config.options ;
    cards_config = config.cards_config ;
    const instructDiv = document.getElementById("instructionsText");
    instructDiv.innerHTML = config.options.instructionsPage1 ;
    if ("numberToDisplay" in options) {
        num_cards = options.numberToDisplay;
    }
    if (num_matches === 4) {
        $("#first_row").removeClass("grid").addClass("grid4");
        $("#second_row").removeClass("grid").addClass("grid4");
    }

    $("#play").on("click", ()=>{
        const instructions = document.querySelector("#instructions1") ;
        instructions.remove() ;

        startGame() ;
    });

});

export {setConfig};


