// GameEditor.js: This script is for editting question

window.questionList = [];


// Add image
$(document).on("click", "#groupAddImage .dropdown-item", function () {
    const that = this;
    $(document).on("change", "#addImageInput", function () {
        let file = $(this)[0].files[0];
        if (file) {
            if (file.size > CONST_MAX_SIZE_ALLOW) {
                showAlert(ERROR_MAX_SIZE_ALLOW);
                return;
            }
            toBase64(file, (base64) => {
                const dataBase64 = `data:image/gif;base64,${base64}`
                window.questionList.push({
                    background: dataBase64,
                    text: ""
                })
                
                const addImageType = $(that).data("addImageType")
                switch (addImageType) {
                    case "background":
                        console.log("background");
                        break;
                        
                    case "center":
                        console.log("center");
                        break;
                
                    case "entry":
                        console.log("entry");
                        const imgTag = `<div><img src="${dataBase64}" alt=""></div>`
                        const data = $("#entriesData").html()
                        const brTag = "<div><br></div>"
                        
                        if (data.endsWith(brTag)) {
                            const endIndexOfBrTag = data.lastIndexOf(brTag)
                            const dataAfterCutBrTag = data.substring(0, endIndexOfBrTag)
                            $("#entriesData").html(dataAfterCutBrTag)
                        }
                        $("#entriesData").append(imgTag)
                        
                        break;
                }
            })
        }
        $(this).val(null);
    })
    
    $("#addImageInput").trigger("click")
})

function readEntryText() {
    window.questionList = [];
    $.each($('#entrydataList').val().split(/\n/), function(i, line){
        if(line){
            let dat = {};
            dat.text = line;
            dat.background = null;
            dat.isRemove = false;
            window.questionList.push(dat);
        }
    });
}

// Entries editor
$(document).on('input', "#entrydataList", function () {
    readEntryText();
    restartGame();
})

// Entries editor
$(document).on('input', "#entriesData", function () {
    const data = $("#entriesData").html()

    let dataArr = data.split("</div>");
    dataArr = dataArr.map(e => e.trim().replaceAll("<div>", "")).filter(e => e != "<br>" && e != "");
    dataArr = dataArr.map(e => {
        if (e.includes("img")) {
            const endIndexSrc = e.indexOf("alt") - 2
            const endIndexTag = e.indexOf(">") + 1

            return {
                background: e.substring(10, endIndexSrc),
                text: e.substring(endIndexTag),
                isRemove: false
            }
        }
        return {
            background: null,
            text: e,
            isRemove: false
        }
    })
    console.log({dataArr});
    window.questionList = dataArr
    restartGame()
})

// clear result list
$(document).on("click", "#btnClearResultList", function() {
    $("#resultsData").empty()
    window.questionList = window.questionList.map(e => e.isRemove ? null : e).filter(e => e)
    restartGame()
})

// Test loadQuestion
$(document).ready(function () {
    if (window.isEditorMode) {
        console.log('Editor mode');
        $('#destroyBackgroundMedia').removeClass('d-none');
    }

    // For testing purpose
    window.questionList = [
        {
            background: null,
            text: "Việt Nam",
            isRemove: false
        },
        {
            background: null,
            text: "Singapore",
            isRemove: false
        },
        {
            background: null,
            text: "Australia",
            isRemove: false
        },
        {
            background: null,
            text: "Japan",
            isRemove: false
        },
        {
            background: null,
            text: "Korea",
            isRemove: false
        }
    ];
    restartGame()
});