/** @type {HTMLElement} */
let beforeImage = null;

/** @type {HTMLImageElement} */
let imageHolder = null;

/** @type {HTMLInputElement} */
let inputText = null;

/** @type {HTMLInputElement} */
let inputFontSize = null;

/** @type {HTMLInputElement} */
let inputColor = null;

/** @type {HTMLInputElement} */
let inputUnsplashID = null;

/**
* 
* @param {Object} data 
* @returns {String}
*/
const encodeQueryData = function (data) {
    const ret = [];
    for (let d in data) {
        ret.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
    }
    return ret.join("&");
}

const setCurrentWizardPage = function(callee) {
    const current = parseInt(callee.getAttribute("wizardCurrent"));
    const next = parseInt(callee.getAttribute("wizardNext"));
    
    console.log(!inputText.validity.valid)
    if (current === 1 && !inputText.validity.valid) {
        inputText.reportValidity();
        return;
    }
    if (current === 2 && (!inputFontSize.validity.valid || !inputColor.validity.valid)) {
        if (!inputFontSize.validity.valid) {
            inputFontSize.reportValidity();
        }
        if (!inputColor.validity.valid) {
            inputColor.reportValidity();
        }
        return;
    }
    if (current === 3 && !inputUnsplashID.validity.valid) {
        inputUnsplashID.reportValidity();
        return;
    }
    
    document.querySelectorAll("[wizardPage]").forEach(page => {
        const pageIdx = parseInt(page.getAttribute("wizardPage"));
        page.hidden = pageIdx !== next;
    });
    
    if (next === 4) {
        loadImage();
    }
}


/**
* 
* @param {String} text 
* @param {Number} fontSize 
* @param {Number} fontWeight 
* @param {String} color 
* @param {String?} backgroundImage 
* @returns {String}
*/
const endpointTpl = (text, fontSize, color="#FFFFFF", backgroundImageId="random") => "https://img.bruzu.com/?" + encodeQueryData({
    backgroundImage:  `https://source.unsplash.com/${backgroundImageId}/500x500?hash=${Date.now()}`,
    "a.text": text,
    "a.color": color,
    "a.fontFamily": "Poppins",
    "a.fontSize": fontSize,
    "a.width": 450,
});

const loadImage = async function () {
    const text = inputText.value;
    const fontSize = parseInt(inputFontSize.value);
    const color = inputColor.value;
    const backgroundImageId = inputUnsplashID.value;

    const imageUri = endpointTpl(text, fontSize, color, backgroundImageId);
    try {
        const resp = await fetch(imageUri);
        const imageBlob = await resp.blob();
        const imageObjectURL = URL.createObjectURL(imageBlob);

        beforeImage.hidden = true
        imageHolder.children[0].src = imageObjectURL;
        imageHolder.hidden = false;
        
    } catch (e) {
        alert(`Произошла ошибка: ${e}`);
        location.reload();
    }
}


const init = function () {
    beforeImage = document.getElementById("beforeImage");
    imageHolder = document.getElementById("imageHolder");
    inputText = document.getElementById("inputText");
    inputFontSize = document.getElementById("inputFontSize");
    inputColor = document.getElementById("inputColor");
    inputUnsplashID = document.getElementById("inputUnsplashID");
    
    document.querySelectorAll("[wizardNext]").forEach(e => e.addEventListener("click", setCurrentWizardPage.bind(window, e)))
}

document.addEventListener("DOMContentLoaded", init);