// SPDX-FileCopyrightText: Chris Pressey, the creator of this work, has dedicated it to the public domain.
// For more information, please refer to <https://unlicense.org/>
// SPDX-License-Identifier: Unlicense

/* dam-download-image-button.js version 0.2-????.?? */

(function() {
    function svgToPng(svg, callback) {
        /*
         * Draw an <svg> element on a (new, dedicated, hidden) canvas element, then
         * call the callback (which may then read the canvas contents as PNG.)
         *
         * The SVG needs either width and height attributes, or viewBox.
         * Some SVG features might render incorrectly or poorly, especially
         * external resources (such as fonts) (due to e.g. CORS)
         */

        const svgData = new XMLSerializer().serializeToString(svg);

        const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
        const url = URL.createObjectURL(blob);

        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            canvas.width = svg.width.baseVal.value || svg.viewBox.baseVal.width;
            canvas.height = svg.height.baseVal.value || svg.viewBox.baseVal.height;
            console.log("canvas.width", canvas.width, "canvas.height", canvas.height);

            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            URL.revokeObjectURL(url);
            callback(canvas);
        };
        img.src = url;
    }

    function downloadBlob(filename, blob) {
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.download = filename;
        link.href = url;
        link.click();
        URL.revokeObjectURL(url);
    };

    function makeDownloadImageButton(config) {
        var button = DAM.maker('button');

        var canvas = config.canvas;
        var svg = config.svg;
        var downloadAs = canvas ? 'png' : (config.downloadAs || 'svg');
        var label = config.label || "Download as " + downloadAs.toUpperCase();
        var basename = config.basename || (canvas ? "canvas" : "vector");

        return button(label, {
            onclick: function() {
                const timestamp = new Date().toISOString().slice(0, 19).replace(/[T:]/g, '-');

                if (svg) {
                    if (downloadAs === 'svg') {
                        const svgData = new XMLSerializer().serializeToString(svg);
                        downloadBlob(
                            basename + "-" + timestamp + ".svg",
                            new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
                        );
                    } else if (downloadAs === 'png') {
                        svgToPng(svg, function(canvas) {
                            canvas.toBlob(function(blob) {
                                downloadBlob(basename + "-" + timestamp + ".png", blob);
                            }, 'image/png');
                        });
                    }
                } else if (canvas) {
                    canvas.toBlob(function(blob) {
                        downloadBlob(basename + "-" + timestamp + ".png", blob);
                    }, 'image/png');
                }
            }
        })
    }

    if (typeof module !== 'undefined') {
        module.exports = { makeDownloadImageButton: makeDownloadImageButton };
    } else if (typeof window !== 'undefined') {
        window.DAM = window.DAM || {};
        DAM.makeDownloadImageButton = makeDownloadImageButton;
    }
})();