let dropBox, canvasList, imgList, work, imgCols, scale_mode, datas
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;

function sleep(millisecond) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve()
        }, millisecond)
    })
}

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";
    document.getElementById("pic_scale_mode").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++) {
        scale(i, 0.3, 0.3)
    }
}

// 双线性插值辅助计算函数
function linear_single(x, x1, x2, f1, f2) {
    return Math.floor(f1 * (x2 - x) / (x2 - x1) + f2 * (x - x1) / (x2 - x1))
}

function linear_insert(row, col, scale_x, scale_y, datas) {
    x = row / scale_y
    y = col / scale_x
    x1 = Math.floor(x)
    x2 = Math.ceil(x)
    y1 = Math.floor(y)
    y2 = Math.ceil(y)
    if (x2 >= ori_h) {
        x2 = x1
    }
    if (y2 >= ori_w) {
        y2 = y1
    }

    if (x1 == x2 && y1 == y2) {
        return { 'r': datas[x1][y1][0], 'g': datas[x1][y1][1], 'b': datas[x1][y1][2], 'a': datas[x1][y1][3] }
    }
    if (x1 == x2) {
        x = x1
        r = linear_single(y, y1, y2, datas[x][y1][0], datas[x][y2][0])
        g = linear_single(y, y1, y2, datas[x][y1][1], datas[x][y2][1])
        b = linear_single(y, y1, y2, datas[x][y1][2], datas[x][y2][2])
        a = linear_single(y, y1, y2, datas[x][y1][3], datas[x][y2][3])
        return { 'r': r, 'g': g, 'b': b, 'a': a }
    }

    if (y1 == y2) {
        y = y1
        r = linear_single(x, x1, x2, datas[x1][y][0], datas[x2][y][0])
        g = linear_single(x, x1, x2, datas[x1][y][1], datas[x2][y][1])
        b = linear_single(x, x1, x2, datas[x1][y][2], datas[x2][y][2])
        a = linear_single(x, x1, x2, datas[x1][y][3], datas[x2][y][3])
        return { 'r': r, 'g': g, 'b': b, 'a': a }
    }
    fy1_r = linear_single(x, x1, x2, datas[x1][y1][0], datas[x2][y1][0])
    fy1_g = linear_single(x, x1, x2, datas[x1][y1][1], datas[x2][y1][1])
    fy1_b = linear_single(x, x1, x2, datas[x1][y1][2], datas[x2][y1][2])
    fy1_a = linear_single(x, x1, x2, datas[x1][y1][3], datas[x2][y1][3])
    fy2_r = linear_single(x, x1, x2, datas[x1][y2][0], datas[x2][y2][0])
    fy2_g = linear_single(x, x1, x2, datas[x1][y2][1], datas[x2][y2][1])
    fy2_b = linear_single(x, x1, x2, datas[x1][y2][2], datas[x2][y2][2])
    fy2_a = linear_single(x, x1, x2, datas[x1][y2][3], datas[x2][y2][3])
    r = linear_single(y, y1, y2, fy1_r, fy2_r)
    g = linear_single(y, y1, y2, fy1_g, fy2_g)
    b = linear_single(y, y1, y2, fy1_b, fy2_b)
    a = linear_single(y, y1, y2, fy1_a, fy2_a)
    return { 'r': r, 'g': g, 'b': b, 'a': a }
}

async function scale(index, scale_x, scale_y) {
    if (document.getElementById("linear").checked) {
        scale_mode = 0;
    }
    else {
        scale_mode = 1;
    }
    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;

    if (ani_mode) {
        document.getElementById("c2").style.display = "flex"
        document.getElementById("c2").append(canvas2);
        document.getElementById("c2").style['justify-content'] = "center"

        document.getElementById("c1").style.width = 70 * vw / (scale_x + 1) + "px"
        document.getElementById("c2").style.width = 70 * vw * scale_x / (scale_x + 1) + "px"
    }

    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++) {
            if (scale_mode == 0) {
                re = linear_insert(i, j, scale_x, scale_y, datas)
                red = re['r']
                green = re['g']
                blue = re['b']
                alpha = re['a']
            }
            else if (scale_mode == 1) {
                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)
            if (ani_mode) if (j % 100 == 0) await sleep(1);
        }
        if (ani_mode) if (i % 2 == 0) await sleep(5);
    }

    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

        if (ani_mode) {
            await sleep(500);
            document.getElementById("c1").style.width = 70 * vw + "px"
            document.getElementById("c2").style.display = "none";
            document.getElementById("c2").removeChild(canvas2);
        }

        if (canvas2.height > 90 * vh) document.getElementById("c1").style['justify-content'] = "flex-start";

        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) {
                saveAs(blob, "yiipic_" + (i + 1) + ".png");
            });
        }
    }
    else {
        canvass[0].toBlob(function (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"
    }
}