var path = require('path');

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 sizes = ui.getSizes();

            var widthPx = (config.gaugewidth * sizes.sx) - (sizes.gx * 2);

            var heightPx = (config.gaugeheight * sizes.sy) - (sizes.gy * 2);

            var html = `
                <script type='text/javascript' src='ui-gauge-group/gauge.min.js'></script>
                <div id="gauge-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap"></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: widthPx, height: heightPx, marginX: sizes.gx, marginY: sizes.gy, gauges: value, socketid: msg.socketid } };
                },
                initController: function ($scope, events) {
                    let gauges = [];
                    const opts = {
                        angle: 0, // The span of the gauge arc
                        lineWidth: 0.4, // The line thickness
                        radiusScale: 1, // Relative radius
                        pointer: {
                            length: 0.6, // // Relative to gauge radius
                            strokeWidth: 0.07, // The thickness
                            color: '#000000' // Fill color
                        },
                        limitMax: true,     // If false, max value increases automatically if value > maxValue
                        limitMin: true,     // If true, the min value of the gauge will be fixed
                        colorStart: '#6FADCF',   // Colors
                        colorStop: '#8FC0DA',    // just experiment with them
                        strokeColor: '#E0E0E0',  // to see which ones work best for you
                        generateGradient: true,
                        highDpiSupport: true,     // High resolution support
                        percentColors: undefined,
                    };

                    $scope.$watch('msg', function (msg) {
                        if (!msg) {
                            return;
                        }
                        var target = $(`#gauge-${msg.iid}`);

                        if (gauges.length < msg.gauges.length) {
                            const difference = msg.gauges.length - gauges.length;
                            for (let i = 0; i < difference; i++) {
                                const obj = {
                                    canvas: undefined,
                                    gauge: undefined,
                                    label: undefined
                                }
                                const canvasId = `gauge-${msg.iid}-${i}-canvas`;
                                const labelId = `gauge-${msg.iid}-${i}-label`;
                                target.append(`
                                <div style="width:${msg.width}px; height:${msg.height}px; margin: ${msg.marginX}px ${msg.marginY}px; display:flex; align-items:center; flex-wrap:wrap">
                                    <div id="${labelId}" style="width:100%; text-align: center; font-weight: bold"></div>
                                    <canvas id="${canvasId}" style="width:100%"></canvas>
                                </div>
                                `);

                                obj.canvas = $(`#${canvasId}`)[0];
                                obj.label = $(`#${labelId}`)[0];

                                let modifiedOpts = Object.assign({}, opts);

                                modifiedOpts.percentColors = msg.gauges[i].smoothColors;

                                obj.gauge = new Gauge(obj.canvas).setOptions(modifiedOpts);
                                obj.gauge.setMinValue(0);

                                gauges.push(obj);
                            }
                        } else if (gauges.length > msg.gauges.length) {
                            const difference = gauges.length - msg.gauges.length;
                            for (let i = 0; i < difference; i++) {
                                const obj = gauges.pop();
                                obj.canvas.remove();
                            }
                        }

                        for (let i = 0; i < gauges.length; i++) {
                            gauges[i].gauge.maxValue = msg.gauges[i].max;
                            gauges[i].gauge.set(msg.gauges[i].value);
                            gauges[i].label.innerHTML = msg.gauges[i].label;
                        }
                    });
                }
            });
        } catch (e) {
            console.log(e)
        }
        node.on('close', done);
    }
    RED.nodes.registerType("ui_gauge_group", ButtonGroupNode);

    var uipath = 'ui';
    if (RED.settings.ui) { uipath = RED.settings.ui.path; }
    var fullPath = path.join('/', uipath, '/ui-gauge-group/*').replace(/\\/g, '/');
    RED.httpNode.get(fullPath, function (req, res) {
        var options = {
            root: __dirname + '/lib/',
            dotfiles: 'deny'
        };
        res.sendFile(req.params[0], options)
    });
}