module.exports = function (RED) {
    var counter = 0;

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

            var html = `
            <div id="buttons-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;"></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: { iid: iid, width: config.buttonwidth, height: config.buttonheight, sizes: ui.getSizes(), buttons: value, socketid: msg.socketid } };
                },
                beforeSend: function (msg, orig) {
                    if (orig) {
                        orig.msg.topic = config.topic;
                        return orig.msg;
                    }
                },
                initController: function ($scope, events) {
                    $scope.$watch('msg', function (msg) {
                        if (!msg) {
                            return;
                        }
                        const iid = msg.iid;


                        var root = $(`#buttons-${iid}`);

                        root.children().remove();

                        const widthPx = (msg.width * msg.sizes.sx) - (msg.sizes.gx * 2);
                        const heightPx = (msg.height * msg.sizes.sy) - (msg.sizes.gy * 2);

                        console.log(root, widthPx, heightPx);

                        for (const button of msg.buttons) {
                            const buttonElement = $(`<button class="md-raised md-button md-ink-ripple" type="button" style="white-space: pre-wrap; word-break: break-word;"></button>`);

                            buttonElement.css("width", `${widthPx}px`);
                            buttonElement.css("height", `${heightPx}px`);
                            buttonElement.css("margin", `${sizes.gx}px ${sizes.gy}px`);
                            buttonElement.css("background-color", button.color ? button.color : "");

                            buttonElement.text(button.label);

                            if (button.click) {
                                buttonElement.on('click', function (e) {
                                    $scope.send(button.click);
                                });
                            }

                            if (button.down) {
                                buttonElement.on('touchstart mousedown', function (e) {
                                    $scope.send(button.down);
                                });
                            }

                            if (button.up) {
                                buttonElement.on('touchend mouseup', function (e) {
                                    $scope.send(button.up);
                                });
                            }

                            root.append(buttonElement);
                        }
                    });
                }
            });
        } catch (e) {
            console.log(e)
        }
        node.on('close', done);
    }
    RED.nodes.registerType("ui_button_group", ButtonGroupNode);
}