const BlockType = require('../../extension-support/block-type');
const ArgumentType = require('../../extension-support/argument-type');
const Color = require('../../util/color');
const cstore = require('./canvasStorage');
const Cast = require('../../util/cast');
const store = new cstore();

/**
 * Class
 * @constructor
 */
class canvas {
    constructor(runtime) {
        /**
         * The runtime instantiating this block package.
         * @type {runtime}
         */
        this.runtime = runtime;
        store.attachRuntime(runtime);
    }

    static get canvasStorageHeader() {
        return 'canvases: ';
    }

    deserialize(data) {
        store.canvases = {};
        for (const canvas of data) {
            store.newCanvas(canvas.name, canvas.width, canvas.height, canvas.id);
        }
    }

    serialize() {
        return store.getAllCanvases()
            .map(variable => ({
                name: variable.name,
                width: variable.width,
                height: variable.height,
                id: variable.id
            }));
    }

    readAsImageElement(src) {
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.onload = function () {
                resolve(image);
                image.onload = null;
                image.onerror = null;
            };
            image.onerror = function () {
                reject(new Error('Costume load failed. Asset could not be read.'));
                image.onload = null;
                image.onerror = null;
            };
            image.src = src;
        });
    }

    orderCategoryBlocks(blocks) {
        const button = blocks[0];
        const varBlock = blocks[1];
        delete blocks[0];
        delete blocks[1];
        // create the variable block xml's
        const varBlocks = store.getAllCanvases().map(canvas => varBlock
            .replace('{canvasId}', canvas.id));
        if (!varBlocks.length) {
            return [button];
        }
        // push the button to the top of the var list
        varBlocks
            .reverse()
            .push(button);
        // merge the category blocks and variable blocks into one block list
        blocks = varBlocks
            .reverse()
            .concat(blocks);
        return blocks;
    }

    /**
     * @returns {object} metadata for this extension and its blocks.
     */
    getInfo() {
        return {
            id: 'canvas',
            name: 'html canvas',
            color1: '#0069c2',
            color2: '#0060B4',
            color3: '#0060B4',
            isDynamic: true,
            orderBlocks: this.orderCategoryBlocks,
            blocks: [
                {
                    opcode: 'createNewCanvas',
                    blockType: BlockType.BUTTON,
                    text: 'create new canvas'
                },
                {
                    opcode: 'canvasGetter',
                    blockType: BlockType.REPORTER,
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: '{canvasId}'
                        }
                    },
                    text: '[canvas]'
                },
                {
                    blockType: BlockType.LABEL,
                    text: "config"
                },
                {
                    opcode: 'setGlobalCompositeOperation',
                    text: 'set composite operation of [canvas] to [CompositeOperation]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        CompositeOperation: {
                            type: ArgumentType.STRING,
                            menu: 'CompositeOperation',
                            defaultValue: ""
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'setSize',
                    text: 'set width: [width] height: [height] of [canvas]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        width: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageWidth
                        },
                        height: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageHeight
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'setTransparency',
                    text: 'set transparency of [canvas] to [transparency]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        transparency: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'setFill',
                    text: 'set fill color of [canvas] to [color]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        color: {
                            type: ArgumentType.COLOR
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'setBorderColor',
                    text: 'set border color of [canvas] to [color]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        color: {
                            type: ArgumentType.COLOR
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    blockType: BlockType.LABEL,
                    text: "drawing"
                },
                {
                    opcode: 'clearCanvas',
                    text: 'clear canvas [canvas]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'clearAria',
                    text: 'clear area at x: [x] y: [y] with width: [width] height: [height] on [canvas]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        x: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        y: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        width: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageWidth
                        },
                        height: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageHeight
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                '---',
                {
                    opcode: 'drawRect',
                    text: 'draw rectangle at x: [x] y: [y] with width: [width] height: [height] on [canvas]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        x: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        y: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        width: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageWidth
                        },
                        height: {
                            type: ArgumentType.NUMBER,
                            defaultValue: this.runtime.stageHeight
                        }
                    },
                    blockType: BlockType.COMMAND
                },
                {
                    opcode: 'drawImage',
                    text: 'draw image [src] at x: [x] y: [y] on [canvas]',
                    arguments: {
                        canvas: {
                            type: ArgumentType.STRING,
                            menu: 'canvas',
                            defaultValue: ""
                        },
                        x: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        y: {
                            type: ArgumentType.NUMBER,
                            defaultValue: '0'
                        },
                        src: {
                            type: ArgumentType.STRING,
                            defaultValue: 'https://studio.penguinmod.com/favicon.ico'
                        }
                    },
                    blockType: BlockType.COMMAND
                }
            ],
            menus: {
                canvas: 'getCanvasMenuItems',
                CompositeOperation: {
                    items: [
                        {
                            "text": "source-over",
                            "value": "source-over"
                        },
                        {
                            "text": "source-in",
                            "value": "source-in"
                        },
                        {
                            "text": "source-out",
                            "value": "source-out"
                        },
                        {
                            "text": "source-atop",
                            "value": "source-atop"
                        },
                        {
                            "text": "destination-over",
                            "value": "destination-over"
                        },
                        {
                            "text": "destination-in",
                            "value": "destination-in"
                        },
                        {
                            "text": "destination-out",
                            "value": "destination-out"
                        },
                        {
                            "text": "destination-atop",
                            "value": "destination-atop"
                        },
                        {
                            "text": "lighter",
                            "value": "lighter"
                        },
                        {
                            "text": "copy",
                            "value": "copy"
                        },
                        {
                            "text": "xor",
                            "value": "xor"
                        },
                        {
                            "text": "multiply",
                            "value": "multiply"
                        },
                        {
                            "text": "screen",
                            "value": "screen"
                        },
                        {
                            "text": "overlay",
                            "value": "overlay"
                        },
                        {
                            "text": "darken",
                            "value": "darken"
                        },
                        {
                            "text": "lighten",
                            "value": "lighten"
                        },
                        {
                            "text": "color-dodge",
                            "value": "color-dodge"
                        },
                        {
                            "text": "color-burn",
                            "value": "color-burn"
                        },
                        {
                            "text": "hard-light",
                            "value": "hard-light"
                        },
                        {
                            "text": "soft-light",
                            "value": "soft-light"
                        },
                        {
                            "text": "difference",
                            "value": "difference"
                        },
                        {
                            "text": "exclusion",
                            "value": "exclusion"
                        },
                        {
                            "text": "hue",
                            "value": "hue"
                        },
                        {
                            "text": "saturation",
                            "value": "saturation"
                        },
                        {
                            "text": "color",
                            "value": "color"
                        },
                        {
                            "text": "luminosity",
                            "value": "luminosity"
                        }
                    ]
                }
            }
        };
    }

    createNewCanvas() {
        const newCanvas = prompt('canvas name?', 'newCanvas');
        // if this camvas already exists, remove it to minimize confusion
        if (!newCanvas) return alert('Canceled')
        if (store.getCanvasByName(newCanvas)) return;
        store.newCanvas(newCanvas);
        vm.emitWorkspaceUpdate();
        this.serialize();
    }

    getCanvasMenuItems() {
        const canvases = store.getAllCanvases();
        if (canvases.length < 1) return [{ text: '', value: '' }];
        return canvases.map(canvas => ({
            text: canvas.name,
            value: canvas.id
        }));
    }

    canvasGetter(args) {
        const canvasObj = store.getCanvas(args.canvas);
        return canvasObj.element.toDataURL();
    }

    setGlobalCompositeOperation(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.globalCompositeOperation = args.CompositeOperation;
    }

    setBorderColor(args) {
        const color = Cast.toString(args.color);
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.strokeStyle = color;
    }

    setFill(args) {
        const color = Cast.toString(args.color);
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.fillStyle = color;
    }

    setSize(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.element.width = args.width;
        canvasObj.element.height = args.height;
        canvasObj.context = canvasObj.element.getContext('2d');
    }

    drawRect(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.fillRect(args.x, args.y, args.width, args.height);
    }

    drawImage(args) {
        return new Promise(resolve => {
            const canvasObj = store.getCanvas(args.canvas);
            const image = new Image();
            image.onload = () => {
                canvasObj.context.drawImage(image, args.x, args.y);
                resolve();
            };
            image.src = args.src;
        });
    }

    clearAria(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.clearRect(args.x, args.y, args.width, args.height);
    }

    clearCanvas(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.clearRect(0, 0, canvasObj.width, canvasObj.height);
    }

    setTransparency(args) {
        const canvasObj = store.getCanvas(args.canvas);
        canvasObj.context.globalAlpha = args.transparency / 100;
    }
}

module.exports = canvas;