'use strict';

goog.provide('Blockly.Blocks.webpage');

goog.require('Blockly.Blocks');
goog.require('Blockly.Types');

Blockly.Blocks.webpage.HUE = "#f28821";

/**webpage Dashboard
 *label for data visualization
 *@param {String} data: to display in dashboard
 */
Blockly.Blocks['webpage_label'] = {
    init: function() {
        this.appendDummyInput()
        .appendField(new Blockly.FieldImage("./../blockly/media/label_header-image.png", 50, 50, "*"));
        this.appendDummyInput()
            .appendField(Blockly.Msg.WEBPAGE_LABLE_TITLE)
            // this.appendDummyInput()
            // .appendField(new Blockly.FieldImage("http://cocorobo.cn/cocoblockly/blockly/media/cocomod_blockly_wifi.png", 140, 40, "0"));
            // .appendField(new Blockly.FieldImage("./../blockly/media/transfer-2.png", 50, 40, "0"));
        this.appendValueInput("ADD0")
            .appendField(Blockly.Msg.WEBPAGE_LABLE)
            .appendField(new Blockly.FieldTextInput("label0"), "LABLE0")

        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setColour(Blockly.Blocks.webpage.HUE);
        this.setTooltip("");
        this.setHelpUrl("");
        this.itemCount_ = 1;
        this.setMutator(new Blockly.Mutator(['webpage_create_with_item']));
    },
    mutationToDom: function() {
        var container = document.createElement('mutation');
        container.setAttribute('items', this.itemCount_);
        return container;
    },
    /**
     * Parse XML to restore the inputs.
     * @param {!Element} xmlElement XML storage element.
     * @this Blockly.Block
     */
    domToMutation: function(xmlElement) {
        this.itemCount_ = parseInt(xmlElement.getAttribute('items'), 10);
        this.updateShape_();
    },
    /**
     * Populate the mutator's dialog with this block's components.
     * @param {!Blockly.Workspace} workspace Mutator's workspace.
     * @return {!Blockly.Block} Root block in mutator.
     * @this Blockly.Block
     */
    decompose: function(workspace) {
        var containerBlock = workspace.newBlock('webpage_create_with_container');
        containerBlock.initSvg();
        var connection = containerBlock.getInput('STACK').connection;
        for (var i = 0; i < this.itemCount_; i++) {
            var itemBlock = workspace.newBlock('webpage_create_with_item');
            itemBlock.initSvg();
            connection.connect(itemBlock.previousConnection);
            connection = itemBlock.nextConnection;
        }
        return containerBlock;
    },
    /**
     * Reconfigure this block based on the mutator dialog's components.
     * @param {!Blockly.Block} containerBlock Root block in mutator.
     * @this Blockly.Block
     */
    compose: function(containerBlock) {
        var itemBlock = containerBlock.getInputTargetBlock('STACK');
        // Count number of inputs.
        var connections = [];
        while (itemBlock) {
            connections.push(itemBlock.valueConnection_);
            itemBlock = itemBlock.nextConnection &&
                itemBlock.nextConnection.targetBlock();
        }
        // Disconnect any children that don't belong.
        for (var i = 0; i < this.itemCount_; i++) {
            var connection = this.getInput('ADD' + i).connection.targetConnection;
            if (connection && connections.indexOf(connection) == -1) {
                connection.disconnect();
            }
        }
        this.itemCount_ = connections.length;
        this.updateShape_();
        // Reconnect any child blocks.
        for (var i = 0; i < this.itemCount_; i++) {
            Blockly.Mutator.reconnect(connections[i], this, 'ADD' + i);
        }
    },
    /**
     * Store pointers to any connected child blocks.
     * @param {!Blockly.Block} containerBlock Root block in mutator.
     * @this Blockly.Block
     */
    saveConnections: function(containerBlock) {
        var itemBlock = containerBlock.getInputTargetBlock('STACK');
        var i = 0;
        while (itemBlock) {
            var input = this.getInput('ADD' + i);
            itemBlock.valueConnection_ = input && input.connection.targetConnection;
            i++;
            itemBlock = itemBlock.nextConnection &&
                itemBlock.nextConnection.targetBlock();
        }
    },
    /**
     * Modify this block to have the correct number of inputs.
     * @private
     * @this Blockly.Block
     */
    updateShape_: function() {
        // if (this.itemCount_ && this.getInput('EMPTY')) {
        //     this.removeInput('EMPTY');
        // } else if (!this.itemCount_ && !this.getInput('EMPTY')) {
        //     this.appendDummyInput('EMPTY')
        //         .appendField(this.newQuote_(true))
        //         .appendField(this.newQuote_(false));
        // }
        // Add new inputs.
        for (var i = 0; i < this.itemCount_; i++) {
            if (!this.getInput('ADD' + i)) {
                var input = this.appendValueInput('ADD' + i)
                    .appendField(Blockly.Msg.WEBPAGE_LABLE)
                    .appendField(new Blockly.FieldTextInput("label" + i), "LABLE" + i);
            }

        }
        // Remove deleted inputs.
        while (this.getInput('ADD' + i)) {
            this.removeInput('ADD' + i);
            i++;
        }
    },
};
Blockly.Blocks['webpage_create_with_container'] = {
    /**
     * Mutator block for list container.
     * @this Blockly.Block
     */
    init: function() {
        this.setColour(Blockly.Blocks.webpage.HUE);
        this.appendDummyInput()
            .appendField(Blockly.Msg.THINGSPEAK_CREATE_WITH_CONTAINER_TITLE_ADD);
        this.appendStatementInput('STACK');
        this.setTooltip('');
        this.contextMenu = false;
    }
};
Blockly.Blocks['webpage_create_with_item'] = {
    /**
     * Mutator bolck for adding items.
     * @this Blockly.Block
     */
    init: function() {
        this.setColour(Blockly.Blocks.webpage.HUE);
        this.appendDummyInput()
            .appendField(Blockly.Msg.THINGSPEAK_CREATE_WITH_ITEM_TITLE);
        this.setPreviousStatement(true);
        this.setNextStatement(true);
        this.setTooltip('');
        this.contextMenu = false;
    }
};


/**webpage Dashboard
 *button for action trigger 
 *@param {String} router: set path for button action to get/post
 *@param {String} data: data to send when button pressed
 */
Blockly.Blocks['webpage_button'] = {
    init: function() {
        this.appendDummyInput()
        .appendField(new Blockly.FieldImage("./../blockly/media/button_header-image.png", 50, 50, "*"));
        this.appendDummyInput()
            .appendField(Blockly.Msg.WEBPAGE_BUTTON_TITLE)
        this.appendDummyInput("ADD0")
            .appendField(Blockly.Msg.WEBPAGE_BUTTON_NAME)
            .appendField(new Blockly.FieldTextInput("Button0"), "BUTTON0")
            .appendField(Blockly.Msg.WEBPAGE_BUTTON_ROUTER)
            .appendField(new Blockly.FieldTextInput("/url0"), "URL0")
        this.setColour(Blockly.Blocks.webpage.HUE);
        this.itemCount_ = 1;
        this.setTooltip("");
        this.setHelpUrl("");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setMutator(new Blockly.Mutator(['webpage_create_with_item']));
    },
    mutationToDom: function() {
        var container = document.createElement('mutation');
        container.setAttribute('items', this.itemCount_);
        return container;
    },
    /**
     * Parse XML to restore the inputs.
     * @param {!Element} xmlElement XML storage element.
     * @this Blockly.Block
     */
    domToMutation: function(xmlElement) {
        this.itemCount_ = parseInt(xmlElement.getAttribute('items'), 10);
        this.updateShape_();
    },
    /**
     * Populate the mutator's dialog with this block's components.
     * @param {!Blockly.Workspace} workspace Mutator's workspace.
     * @return {!Blockly.Block} Root block in mutator.
     * @this Blockly.Block
     */
    decompose: function(workspace) {
        var containerBlock = workspace.newBlock('webpage_create_with_container');
        containerBlock.initSvg();
        var connection = containerBlock.getInput('STACK').connection;
        for (var i = 0; i < this.itemCount_; i++) {
            var itemBlock = workspace.newBlock('webpage_create_with_item');
            itemBlock.initSvg();
            connection.connect(itemBlock.previousConnection);
            connection = itemBlock.nextConnection;
        }
        return containerBlock;
    },
    /**
     * Reconfigure this block based on the mutator dialog's components.
     * @param {!Blockly.Block} containerBlock Root block in mutator.
     * @this Blockly.Block
     */
    compose: function(containerBlock) {
        var itemBlock = containerBlock.getInputTargetBlock('STACK');
        // Count number of inputs.
        var connections = [];
        while (itemBlock) {
            connections.push(itemBlock.valueConnection_);
            itemBlock = itemBlock.nextConnection &&
                itemBlock.nextConnection.targetBlock();
        }
        // // Disconnect any children that don't belong.
        // for (var i = 0; i < this.itemCount_; i++) {
        //     var connection = this.getInput('ADD' + i).connection.targetConnection;
        //     if (connection && connections.indexOf(connection) == -1) {
        //         connection.disconnect();
        //     }
        // }
        this.itemCount_ = connections.length;
        this.updateShape_();
        // Reconnect any child blocks.
        for (var i = 0; i < this.itemCount_; i++) {
            Blockly.Mutator.reconnect(connections[i], this, 'ADD' + i);
        }
    },
    /**
     * Store pointers to any connected child blocks.
     * @param {!Blockly.Block} containerBlock Root block in mutator.
     * @this Blockly.Block
     */
    saveConnections: function(containerBlock) {
        var itemBlock = containerBlock.getInputTargetBlock('STACK');
        var i = 0;
        while (itemBlock) {
            var input = this.getInput('ADD' + i);
            // itemBlock.valueConnection_ = input && input.connection.targetConnection;
            i++;
            itemBlock = itemBlock.nextConnection &&
                itemBlock.nextConnection.targetBlock();
        }
    },
    /**
     * Modify this block to have the correct number of inputs.
     * @private
     * @this Blockly.Block
     */
    updateShape_: function() {
        // if (this.itemCount_ && this.getInput('EMPTY')) {
        //     this.removeInput('EMPTY');
        // } else if (!this.itemCount_ && !this.getInput('EMPTY')) {
        //     this.appendDummyInput('EMPTY')
        //         .appendField(this.newQuote_(true))
        //         .appendField(this.newQuote_(false));
        // }
        // Add new inputs.
        for (var i = 0; i < this.itemCount_; i++) {
            if (!this.getInput('ADD' + i)) {
                var input = this.appendDummyInput("ADD" + i)
                    .appendField(Blockly.Msg.WEBPAGE_BUTTON_NAME)
                    .appendField(new Blockly.FieldTextInput("Button" + i), "BUTTON" + i)
                    .appendField(Blockly.Msg.WEBPAGE_BUTTON_ROUTER)
                    .appendField(new Blockly.FieldTextInput("url" + i), "URL" + i)
            }
        }
        // Remove deleted inputs.
        while (this.getInput('ADD' + i)) {
            this.removeInput('ADD' + i);
            i++;
        }
    },
};

Blockly.Blocks['webpage_colorpicker'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldImage("./../blockly/media/colorpicker_header-image.png", 50, 50, "*"));
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_COLORPICKER_TITLE);
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_COLORPICKER_PATH)
        .appendField(new Blockly.FieldTextInput("/color"), "webpage_colorpicker_path");
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_COLORPICKER_SUBTITLE);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(Blockly.Blocks.webpage.HUE);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

Blockly.Blocks['webpage_buttoncontroller'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldImage("./../blockly/media/buttoncontroller_header-image.png", 50, 50, "*"));
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TITLE);
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TEXT_TOP)
        .appendField(new Blockly.FieldTextInput("up"), "webpage_buttoncontroller_top")
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_SETPATH)
        .appendField(new Blockly.FieldTextInput("/controller"), "webpage_buttoncontroller_top_path");
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TEXT_LEFT)
        .appendField(new Blockly.FieldTextInput("left"), "webpage_buttoncontroller_left")
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_SETPATH)
        .appendField(new Blockly.FieldTextInput("/controller"), "webpage_buttoncontroller_left_path");
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TEXT_CENTER)
        .appendField(new Blockly.FieldTextInput("center"), "webpage_buttoncontroller_center")
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_SETPATH)
        .appendField(new Blockly.FieldTextInput("/controller"), "webpage_buttoncontroller_center_path");
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TEXT_RIGHT)
        .appendField(new Blockly.FieldTextInput("righ"), "webpage_buttoncontroller_right")
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_SETPATH)
        .appendField(new Blockly.FieldTextInput("/controller"), "webpage_buttoncontroller_right_path");
    this.appendDummyInput()
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_TEXT_BOTTOM)
        .appendField(new Blockly.FieldTextInput("bottom"), "webpage_buttoncontroller_bottom")
        .appendField(Blockly.Msg.WEBPAGE_BUTTONCTRL_SETPATH)
        .appendField(new Blockly.FieldTextInput("/controller"), "webpage_buttoncontroller_bottom_path");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(Blockly.Blocks.webpage.HUE);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};