// ==UserScript==
// @name Patrick.net Image Clipboard Paste
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Image Paste
// @match http://patrick.net/post/*
// @match https://patrick.net/post/*
// @match http://patrick.net/edit_comment*
// @match https://patrick.net/edit_comment*
// @match http://patrick.net/new_post*
// @match https://patrick.net/new_post*
// @run-at document-end
// ==/UserScript==

/* jshint esnext:true */

(function() {
    'use strict';

    // <include file="common.js">

    // This file (common.js) contains some common code that will be replaced into other js files
    // via running the build.sh script

    /**
     * Recursively creates dom elements from your html string.
     *
     * @param {string} htmlStr
     * @return {DocumentFragment}
     */
    function htmlToFragment(htmlStr) {
        const template = document.createElement('template');
        template.innerHTML = htmlStr;
        return template.content;
    }

    /**
     * Recursively creates dom elements from your html string. Only the first top-level element will be returned.
     *
     * @example htmlToElements('  <label>foo <input value=123></label>').querySelector('input').value === '123'
     * @param {string} htmlStr
     * @return {Element}
     */
    function htmlToElements(htmlStr) {
        return htmlToFragment(htmlStr).firstElementChild;
    }

    /**
     * A compact shorthand of document.querySelector(...);
     *
     * @param {string} cssSelector
     * @param {Element | Document} [contextElement]
     * @return {HTMLElement | null}
     */
    function qs(cssSelector, contextElement = document) {
        return contextElement.querySelector(cssSelector);
    }

    /**
     * A compact shorthand of document.querySelectorAll(...), but returns a real array instead of a NodeList
     *
     * @param {string} cssSelector
     * @param {Element | Document} [contextElement]
     * @return {Array<HTMLElement>}
     */
    function qsa(cssSelector, contextElement = document) {
        return Array.from(contextElement.querySelectorAll(cssSelector));
    }

    function insertAfter(item, reference) {
        if (reference.nextSibling) {
            reference.parentNode.insertBefore(item, reference.nextSibling);
        } else {
            reference.parentNode.appendChild(item);
        }
    }

    function addCss(cssStr) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.rel = 'stylesheet';
        style.innerHTML = cssStr;
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    // </include>

    const imageForm = qs('#upload-file,#upload_form');
    const fileInput = imageForm.querySelector('[type=file]');

    const dropArea = imageForm;
    // const dropArea = htmlToElements('<div style="width: 300px; height: 300px; border: 1px solid #ccc;"></div>');
    const label = htmlToElements('<div>Drag and drop an image file, or paste an image from your clipboard into this box.</div>');

    insertAfter(dropArea, imageForm);
    imageForm.prepend(label);


    dropArea.addEventListener('drop', evt => {
        evt.preventDefault();
        fileInput.files = evt.dataTransfer.files;
    });

    dropArea.addEventListener('dragover', evt => {
        evt.preventDefault();
    });

    dropArea.addEventListener('paste', evt => {
        const dataTransfer = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
            new DataTransfer(); // specs compliant (as of March 2018 only Chrome)

        // use event.originalEvent.clipboard for newer chrome versions
        const items = (event.clipboardData || event.originalEvent.clipboardData).items;
        // find pasted image among pasted items
        for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") === 0) {
                const pastedImageFile = items[i].getAsFile();

                // Copy it, so we can change the name to be unique.
                const blob = pastedImageFile.slice(0, pastedImageFile.size, 'image/png');
                const newFile = new File([blob], `pasted-image-${new Date().getTime()}.png`, {type: 'image/png'});

                dataTransfer.items.add(newFile);
            }
        }

        fileInput.files = dataTransfer.files;
    });

    addCss(`
    #upload-file, #upload_form {
        border: 1px solid #ccc;
        padding: 1em;
        background-color: #d9edf7;
        margin-bottom: 1em;
    }
    `);
})();