// ==UserScript==
// @name         Dall-e-2 Copy Button Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Copy 6 mini images to clipboard
// @author       Jonathan
// @match        https://labs.openai.com/e/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license      CC
// @downloadURL none
// ==/UserScript==
function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}
(function() {
    'use strict';
    const addBtn = function() {
        const node = document.getElementsByClassName('task-page-generations')[0];
        const btn = document.createElement('div');
        btn.style['align-self'] = 'center';
        btn.style['padding-bottom'] = '10px';
        btn.innerHTML = '<button id="copy-btn" class="btn btn-medium btn-filled btn-secondary" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn-label-wrap"><span class="btn-label-inner">Copy‍</span></span></button>';
        btn.addEventListener('click', function() {
            console.log('copy button clicked');
            const canvas = document.createElement('canvas');
            canvas.id = "copy-canvas";
            const imSize = 400;
            const margin = 8
            canvas.width = 3*imSize + (4*margin);
            canvas.height =2*imSize + (2*margin) + 50;
            const body = document.getElementsByTagName("body")[0];
            body.appendChild(canvas);
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            const images = document.getElementsByClassName('generated-image');
            const sig = document.getElementsByClassName('image-signature')[0];
            for(var i = 0; i < 6; i++) {
                const img = images.item(i).firstChild;
                const x = (imSize * i + (i%3*margin)) % 1200 + margin;
                const y = margin+ (i<3?0:imSize + margin);
                ctx.drawImage(img, x, y, imSize, imSize);
                ctx.translate(x+imSize-80, y+imSize-16);
                for(var p=0;p<sig.children.length;p++) {
                    const pp = sig.children[p]
                    const path = new Path2D(pp.getAttribute('d'));
                    ctx.fillStyle = pp.getAttribute('fill');
                    ctx.fill(path);
                }
                ctx.setTransform(1,0,0,1,0,0);
            }
            ctx.fillStyle = "black";
            ctx.font = "12px Charter, Georgia";
            ctx.fillText("DALL·E - " + document.getElementsByClassName('image-prompt-input')[0].value, 16, canvas.height-42+12);
            canvas.toBlob(function(blob) {
                const item = new ClipboardItem({'image/png': blob });
                navigator.clipboard.write([item]);
            })
            document.getElementById("copy-canvas").outerHTML = "";
        });
        node.prepend(btn);
    }
    waitForElm('.task-page-generations').then((elm) => {
        addBtn();
    });
 })();