let dropBox, canvasList, imgList, work, imgCols
let canvass = [], imgs = []
let pic_info
let multi
let imgh = [0, 0, 0]
let ani_mode = 0

let vh = window.innerHeight / 100;
let vw = window.innerWidth / 100;;

window.onload = function () {
    dropBox = document.getElementById("dropbox");
    canvasList = document.getElementById("canvasList");
    work = document.getElementById("work");
    pic_info = document.getElementById("pic_info");
    imgList = document.getElementById("imgList");
    imgCols = [document.getElementById("c1"), document.getElementById("c2"), document.getElementById("c3")]
    dropBox.ondragenter = dropFileEnter;
    dropBox.ondragover = dropFileOver;
    dropBox.ondragleave = dropFileLeave;
    dropBox.ondrop = dropFile;
}

function dropFileLeave(e) {
    e.preventDefault();
    dropBox.style.background = "#FFFFCC";
}

function dropFileEnter(e) {
    e.preventDefault();
    dropBox.style.background = "rgb(182, 182, 162)";
}

function dropFileOver(e) {
    e.preventDefault();
}

function dropFile(e) {
    e.stopPropagation();
    e.preventDefault();
    let data = e.dataTransfer;
    let files = []
    for (let i = 0; i < data.files.length; i++) {
        let file_type = data.files[i].type;
        if (file_type.substr(0, 5) == "image") {
            files.push(data.files[i]);
        }
    }
    if (files.length == 0) {
        noFileError();
    }
    else processFiles(files);
}

function noFileError() {
    dropBox.style.background = "indianred";
    dropBox.innerHTML = "无有效图片文件"
    setTimeout(function () {
        dropBox.style.background = "lightyellow";
        dropBox.innerHTML = "请点击上传或将图片拖入"
    }, 1000)
}

function selectFile() {
    let fileInput = document.getElementById("fileInput");
    fileInput.click();
}

function processFiles(files) {
    multi = files.length == 1 ? 0 : 1;
    document.getElementById("drop").style.display = "none";
    document.getElementById("pic_scale_size").style.display = "flex";
    document.getElementById("pic_scale_sc").style.display = "flex";
    document.getElementById("pic_scale_fun").style.display = "flex";
    work.style.display = "flex";
    if (multi == 1) {
        let pic_num = document.createElement('div');
        pic_num.setAttribute("class", "row_Text");
        pic_num.innerHTML = "图片数量：" + files.length + " 张"
        pic_info.appendChild(pic_num)

        let canvas_i = 0;
        for (let i = 0; i < files.length; i++) {
            let reader = new FileReader();
            reader.onload = function (e) {
                let image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    let width = image.width;
                    let height = image.height;
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext("2d");
                    canvas.setAttribute("width", width + "px")
                    canvas.setAttribute("height", height + "px")
                    canvas.setAttribute("id", "canvas_" + canvas_i);

                    ctx.drawImage(image, 0, 0);

                    canvass.push(canvas)

                    canvasList.appendChild(canvas);

                    imgInsert(image, canvas_i);
                    canvas_i++;
                };
            };
            reader.readAsDataURL(files[i]);
        }
    }
    else {
        let file = files[0]
        let ls = 4, rows = [];
        while (ls--) {
            let row = document.createElement('div')
            row.setAttribute("class", "row_Text");
            rows.push(row)
        }
        rows[0].innerHTML = "文件名：" + file.name
        rows[1].innerHTML = "文件大小：" + file.size
        rows[2].innerHTML = "文件类型：" + file.type
        rows[3].innerHTML = "最后修改：" + file.lastModifiedDate

        for (let i = 0; i < rows.length; i++) {
            pic_info.appendChild(rows[i])
        }

        document.getElementById("ani_but").style.display = "flex"

        document.getElementById("c2").style.display = "none"
        document.getElementById("c3").style.display = "none"

        let reader = new FileReader();
        reader.onload = function (e) {
            let image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                let width = image.width;
                let height = image.height;

                let row = document.createElement('div')
                row.setAttribute("class", "row_Text");
                row.setAttribute("id", "size")
                row.innerHTML = "尺寸：" + width + " x " + height
                pic_info.appendChild(row)

                let canvas = document.createElement('canvas')
                let ctx = canvas.getContext("2d")

                canvas.setAttribute("width", width + "px")
                canvas.setAttribute("height", height + "px")
                canvas.setAttribute("id", "canvas");

                ctx.drawImage(image, 0, 0);

                canvass.push(canvas)
                canvasList.appendChild(canvas);

                if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px")
                document.getElementById("c1").appendChild(image)
                document.getElementById("c1").style.width = 70 * vw + "px"
                document.getElementById("c1").style['justify-content'] = "center"

                imgs.push(image);

                document.getElementById("scale_size_width").value = Math.round(width / 2)
                document.getElementById("scale_size_height").value = Math.round(height / 2)

            };
        };
        reader.readAsDataURL(file);
    }
}

function findex(value, arr) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] == value) return i;
    }
    return null;
}

function imgInsert(img, index) {
    let i = findex(Math.min(...imgh), imgh)
    imgh[i] += img.height / img.width * 20 * vw + 24;
    let imgdiv = document.createElement('div');
    let imgdesp = document.createElement('div');
    imgdiv.setAttribute("class", "imgcard")
    imgdesp.setAttribute("class", "imgdesp")
    imgdesp.innerHTML = "[" + (index + 1) + "] " + img.width + " x " + img.height
    img.setAttribute("width", 20 * vw + "px")
    imgdiv.setAttribute("id", "img_" + index)

    imgdiv.appendChild(img);
    imgdiv.appendChild(imgdesp);
    imgCols[i].appendChild(imgdiv);

    imgs.push(img)
}

function scale_size() {
    let new_w = document.getElementById("scale_size_width").value;
    let new_h = document.getElementById("scale_size_height").value;

    for (let i = 0; i < canvass.length; i++) {
        let scale_x = new_w / canvass[i].width
        let scale_y = new_h / canvass[i].height
        scale(i, scale_x, scale_y)
    }
}

function scale_size_sc() {
    let scale_x = parseFloat(document.getElementById("scale_size_sc_x").value);
    let scale_y = parseFloat(document.getElementById("scale_size_sc_y").value);
    for (let i = 0; i < canvass.length; i++) {
        scale(i, scale_x, scale_y)
    }
}

function scale_size_ma() {
    for (let i = 0; i < canvass.length; i++) {
        // let minx = Math.min(canvass[i].width, canvass[i].height)
        // let ls = 0;
        // while (minx) {
        //     ls++
        //     minx = Math.floor(minx / 10);
        // }
        // if (ls > 2) {
        //     let scale_s = Math.pow(10, ls-2);
        //     scale(i, 1 / scale_s, 1 / scale_s)
        //     scale(i, scale_s, scale_s)
        // }

        scale(i, 0.3, 0.3)
    }
}

function scale(index, scale_x, scale_y) {
    canvas = canvass[index]
    cxt = canvas.getContext("2d")
    imgData = cxt.getImageData(0, 0, canvas.width, canvas.height);

    canvas2 = document.createElement('canvas');
    let ctx = canvas2.getContext('2d');

    ori_w = imgData.width;
    ori_h = imgData.height;

    canvas2.setAttribute("height", ori_h * scale_y + "px");
    canvas2.setAttribute("width", ori_w * scale_x + "px");
    canvas2.setAttribute("id", "canvas_" + index)

    let data_s = []
    for (let i = 0; i < imgData.data.length;) {
        data_s.push(imgData.data.slice(i, i += 4));
    }
    let datas = []
    for (let i = 0; i < data_s.length;) {
        datas.push(data_s.slice(i, i += ori_w));
    }

    for (let i = 0; i < ori_h * scale_y; i++) {
        for (let j = 0; j < ori_w * scale_x; j++) {
            red = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][0];
            green = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][1];
            blue = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][2];
            alpha = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][3];
            ctx.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
            ctx.fillRect(j, i, 1, 1)
        }
    }

    let imgdata = canvas2.toDataURL();
    newImg = new Image();
    newImg.src = imgdata;

    if (multi == 1) {

        newImg.setAttribute("width", 20 * vw + "px")
        document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
        document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
        canvasList.replaceChild(canvas2, canvass[index]);

        canvass[index] = canvas2;
        imgs[index] = newImg;
    }
    else {
        if (canvas2.width > 60 * vw) newImg.setAttribute("width", 60 * vw + "px")

        document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height

        document.getElementById("c1").replaceChild(newImg, imgs[index]);
        canvasList.replaceChild(canvas2, canvass[index]);

        canvass[index] = canvas2;
        imgs[index] = newImg;
    }
}

function saveImg() {
    if (multi == 1) {
        let blobs = []
        for (let i = 0; i < canvass.length; i++) {
            canvass[i].toBlob(function (blob) {
                console.log(blob)
                saveAs(blob, "yiipic_" + (i + 1) + ".png");
            });
        }
    }
    else {
        canvass[0].toBlob(function (blob) {
            console.log(blob)
            saveAs(blob, "yiipic.png");
        });
    }
}

function animatePic() {
    ani_mode = !ani_mode
    if(ani_mode){
        document.getElementById("ani_but").style.color = "red"
    }
    else {
        document.getElementById("ani_but").style.color = "black"
    }
}