module.exports = function (RED) {
    function ButtonGroupNode(config) {
        var ui = undefined;
        try {
            var node = this;
            if (ui === undefined) {
                ui = RED.require("node-red-dashboard")(RED);
            }
            RED.nodes.createNode(this, config);

            var sizes = ui.getSizes();

            var widthPx = config.buttonwidth * sizes.sx - sizes.gx;

            var heightPx = config.buttonheight * sizes.sy - sizes.gy;

            var html = `<div style="width=100%; height=100%">
                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}}; white-space: pre-wrap; word-break: break-word;" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
                </div>`;

            var done = ui.addWidget({
                node: node,
                order: config.order,
                group: config.group,
                width: config.width,
                height: config.height,
                format: html,
                templateScope: 'local',
                emitOnlyNewValues: false,
                forwardInputMessages: false,
                storeFrontEndInputAsState: false,
                convertBack: function (value) {
                    return value;
                },
                beforeEmit: function (msg, value) {
                    return { msg: { buttons: value, socketid: msg.socketid } };
                },
                beforeSend: function (msg, orig) {
                    if (orig) {
                        orig.msg.topic = config.topic;
                        return orig.msg;
                    }
                },
                initController: function ($scope, events) {
                    $scope.buttonClick = function (e) {
                        e.preventDefault();
                        var buttonId = e.target.id;
                        if ($scope.msg.buttons[buttonId].payload) {
                            $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
                        }
                    };
                }
            });
        } catch (e) {
            console.log(e)
        }
        node.on('close', done);
    }
    RED.nodes.registerType("ui_button_group", ButtonGroupNode);
}