// ==UserScript==
// @name         Dall-e-2 Copy Button Userscript
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Copy 6 mini images to clipboard
// @author       Jonathan, shoutout to will
// @match        https://labs.openai.com/e/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @licence      CC
// @downloadURL none
// ==/UserScript==
(function() {
    'use strict';
    const addBtn = function() {
        const node = document.getElementsByClassName('task-page-generations')[0];

        const makeImage = 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)) % (3*imSize) + 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 = "";
        };
        const saveAll = function() {
            for(let i = 0; i < 6; i++) {
                document.getElementsByClassName("task-page-quick-actions-button")[i].click();
                document.getElementsByClassName("menu-item menu-item-selectable")[3].click();
            }
        };
        const rowDiv = document.createElement('div');
        rowDiv.style.cssText = 'align-items: horizontal; align-self: center; flex: auto; align-items: center; padding-bottom: 10px; display: flex; flex-direction: row;'
        node.prepend(rowDiv);
        const mkBtn = function(txt, id) {
            const btn = document.createElement('div');
            btn.innerHTML = `<button id="${id}" 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">${txt}</span></span></button>`;
            rowDiv.prepend(btn);
            return btn;
        }
        const btnCopy = mkBtn('Copy', 'btn-copy')
        const btnSave = mkBtn('Save', 'btn-save')
        btnSave.style['padding-right'] = '10px';
        btnSave.addEventListener('click', saveAll);
        btnCopy.addEventListener('click', makeImage);
    }
    setInterval(function() {
        // if task-page-generations-grid is on the page, and the buttons are not, add them
        if(document.getElementsByClassName("task-page-quick-actions-button").length == 6) {
            if(!document.getElementById('btn-copy')) {
                addBtn();
            }
        }
    },500);
 })();