// ==UserScript==
// @name     Image Downloader
// @version  1
// @grant    none
// ==/UserScript==

const reg = /^https:\/\/boards\.4chan(nel)?\.org\/\w+\/thread\/\d+/;

if (reg.test(document.URL)) {
    const posts = [...document.querySelectorAll(".fileThumb")].map((link) => {
        const parent = link.parentElement.parentElement.parentElement;

        return { parent, link };
    });
    const download = document.createElement("button");
    const checkmarks = [];
    const checkAll = document.createElement("input");
    const checkLabel = document.createElement("label");
    const checkWrapper = document.createElement("div");
    let toDownload;

    toDownload = [];

    download.style.position = "fixed";
    download.style.top = "3rem";
    download.style.right = "3rem";
    download.innerText = "Download All";
    checkAll.setAttribute("type", "checkbox");
    checkAll.setAttribute("id", "check-all");
    checkLabel.setAttribute("for", "check-all");
    checkLabel.innerText = "select all";
    checkWrapper.style.position = "fixed";
    checkWrapper.style.top = "5rem";
    checkWrapper.style.right = "3rem";

    checkWrapper.append(checkAll);
    checkWrapper.append(checkLabel);

    document.body.append(download);
    document.body.append(checkWrapper);

    download.addEventListener("click", () =>
        toDownload.forEach((image) => download_image(image))
    );

    checkAll.addEventListener("click", (event) => {
        if (event.target.checked) {
            posts.forEach((post, index) => {
                if (!toDownload.includes(post.link.href)) {
                    toDownload.push(post.link.href);
                    checkmarks[index].checked = true;
                    checkLabel.innerText = "unselect all";
                }
            });
        } else {
            toDownload = [];
            checkmarks.forEach((box) => (box.checked = false));
            checkLabel.innerText = "select all";
        }
    });

    posts.forEach((post) => {
        const parentInfo = post.parent.querySelector(".postInfo");
        const markForDownload = document.createElement("input");
        const donwloadButton = document.createElement("button");

        markForDownload.setAttribute("type", "checkbox");
        donwloadButton.innerText = "DL";
        donwloadButton.style.fontSize = ".95rem";

        parentInfo.append(markForDownload);
        parentInfo.append(donwloadButton);
        checkmarks.push(markForDownload);

        markForDownload.addEventListener("click", (event) => {
            if (event.target.checked) toDownload.push(post.link.href);
            else
                toDownload = toDownload.filter(
                    (other) => other !== post.link.href
                );
        });

        donwloadButton.addEventListener("click", () =>
            download_image(post.link.href)
        );
    });

    function draw_image(href) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        const img = document.createElement("img");

        canvas.style.position = "fixed";
        canvas.style.bottom = "2rem";
        canvas.style.right = "2rem";

        img.src = href;

        return new Promise((resolve) =>
            img.addEventListener("load", () => {
                canvas.width = img.width;
                canvas.height = img.height;
                context.drawImage(img, 0, 0);
                resolve(canvas.toDataURL());
            })
        );
    }

    async function download_image(href) {
        const data = await draw_image(href);
        const a = document.createElement("a");
        const name = `${Math.random().toString(16).slice(-10)}.${href.slice(
            -3
        )}`;

        a.href = data;
        a.download = name;
        a.click();
    }
}