const getData = (eve) => {
    doAjax("getData=true");
}

const deleteItem = (type, data, elm) => {
    elm.parentElement.removeChild(elm);
    doAjax("deleteData=true&type="+ type +"&data=" + data);
}

const submitText = (eve) => {
    let textArea     = document.getElementById("textDrop");
    let textAreaData = textArea.value;
    let type         = "";
    let data         = "";

    // Text uploader
    if (textAreaData != "") {
        if (textAreaData.indexOf("http://") == 0 || textAreaData.indexOf("https://") == 0 ||
        textAreaData.indexOf("ftp://")  == 0 || textAreaData.indexOf("file://") == 0) {
            type = "a";
            data = encodeURI(textAreaData);
        } else {
            type = "text";
            data = btoa(textAreaData);
        }

        createLI(type, textAreaData, "nonencode");
        doAjax("deleteData=false&type="+ type +"&data=" + data);
        textArea.value = "";
    }

    // File uploader
    let elmFile = document.getElementById("file");
    let count   = elmFile.files.length;
    if (count > 0) {
        for (var i = 0; i < count; i++) {
            let file = elmFile.files[i];
            let fileReader = new FileReader();
            fileReader.onload = () => {
                type = "img";
                doAjax("deleteData=false&type="+ type +"&data=" + btoa(fileReader.result));
            };
            fileReader.readAsDataURL(file);
        }
    }
}

const doAjax = (data) => {
    let xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            handleXMLReturnData(this.responseXML, "dencode");
        }
    };

    xhttp.open("POST", "resources/php/dbController.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.overrideMimeType('application/xml'); // Force return to be XML
    xhttp.send(data);
}


const handleXMLReturnData = (xml, textType) => {
    let blobs = xml.getElementsByTagName('BLOB');

    for (var i = 0; i < blobs.length; i++) {
        let type = blobs[i].getElementsByTagName('TYPE')[0].innerHTML;
        let data = blobs[i].getElementsByTagName('DATA')[0].innerHTML;
        createLI(type, data, textType);
    }
}

const createLI = (type, data, textType) => {
    let trTag  = document.createElement("TR");
    let lTdTag = document.createElement("TD");
    let rTdTag = document.createElement("TD");
    let embTag = document.createElement("TD");

    let liTag  = document.createElement("LI");
    let pTag   = document.createElement("P");
    let imgTag = document.createElement("IMG");
    let aTag   = document.createElement("A");
    let list   = document.getElementById("dropperList");
    let xText  = document.createTextNode("X");

    lTdTag.className = "xButton";
    if (type.includes("a")) {
        let decodedData = decodeURI(data);
        let text        = document.createTextNode(decodedData);
        aTag.href       = decodedData;
        aTag.target     = "_blank";
        rTdTag.name     = "a";
        aTag.append(text);
        rTdTag.append(aTag);

        if (decodedData.includes("www.youtube.com/watch?v=") ||
            decodedData.includes("www.youtube.com/embed")    ||
            decodedData.includes("https://youtu.be/")) {
            let embSpan       = document.createElement("SPAN");
            let embText       = document.createTextNode("[embed]");
            embSpan.className = "fakeLinkEffect";
            embSpan.name      = decodedData;
            embSpan.setAttribute("onclick", "embedVideo(this)");

            embSpan.append(embText);
            embTag.append(embSpan);
        }
    } else if (type.includes("img")) {
        imgTag.className = "image";
        rTdTag.name      = "img";
        imgTag.src       = atob(data);
        rTdTag.append(imgTag);
    } else if (type.includes("text")) {
        let decodedData = "";

        if (textType === "nonencode") {
            decodedData = data;
        } else if (textType === "dencode") {
            decodedData = atob(data);
        }

        let text        = document.createTextNode(decodedData);
        rTdTag.name     = "text";
        pTag.append(text);
        rTdTag.append(pTag);
    }

    lTdTag.append(xText);
    trTag.append(lTdTag);
    trTag.append(rTdTag);
    trTag.append(embTag);
    liTag.append(trTag);
    list.append(liTag);
}

const embedVideo = (elm) => {
    let mainTg = elm.parentElement.parentElement.parentElement;

    if (mainTg.nextElementSibling) {
        let tgName = mainTg.nextElementSibling.children[0].children[0];

        if (tgName.children[0] != null && tgName.children[0] != undefined) {
            if (tgName.children[0].tagName == "IFRAME") {
                mainTg.parentElement.removeChild(mainTg.nextElementSibling);
                return;
            }
        }
    }

    let trTag  = document.createElement("TR");
    let tdTag  = document.createElement("TD");
    let ifrTag = document.createElement("IFRAME");
    let liTag  = document.createElement("LI");
    let list   = document.getElementById("dropperList");
    let url    = elm.name;

    if (url.includes("https://")) {
        url = url.split("https://")[1];
    }

    if (url.includes("youtu.be/")) {
        url = url.slice(9, 9+11);
    } else if (url.includes("www.youtube.com/watch?v=")) {
        url = url.slice(24, 24+11);
    } else if (url.includes("www.youtube.com/embed/")) {
        url = url.slice(22, 22+11);
    }
    ifrTag.src = "https://www.youtube.com/embed/" + url;
    ifrTag.width  = "720px";
    ifrTag.height = "640px";
    ifrTag.allow  = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
    ifrTag.setAttribute("frameborder", 0);
    ifrTag.setAttribute("allowfullscreen", true);

    tdTag.append(ifrTag);
    trTag.append(tdTag);
    liTag.append(trTag);
    list.append(liTag);

    if (mainTg.nextElementSibling) {
        list.insertBefore(liTag, mainTg.nextElementSibling);
    } else {
        list.append(liTag);
    }
}

// <iframe src="https://www.youtube.com/embed/7V9_HGzK3oU" allow= allowfullscreen></iframe>
