var CanvasGauges = Namespace.declare("com.canvas-gauges",
    class CanvasGauges extends UcpComponent {
        static get implements() { return [] }
        static start() { }

        static get dependencies() {
            return [
                this.IOR.loader.basePath + "/dist/gauge.min.js"
            ];
        }

        constructor() {
            super();
        }

        init() {
            if (this._private.isInitialized) {
                return;
            }
            super.init();

            this.model = {
                name: "Generic Gauge",
                description: "configurable in realtime",
                value: "39.8",

                type: "radial-gauge",
                borderRadius: "0",
                borders: "0",
                barBeginCircle: "25",
                minorTicks: "10",
                minValue: "35",
                maxValue: "42",
                majorTicksStepRate: "1",
                title: "??C",
                majorTicks: "35,36,37,38,39,40,41,42",
                ticksWidth: "18",
                ticksWidthMinor: "7.5",
                barWidth: "5",
                highlights: "false",
                colorValueBoxShadow: "false",
                valueBoxStroke: "0",
                colorValueBoxBackground: "false",
                valueInt: "2",
                valueDec: "1",

                animationDuration: "1500",
                animationRule: "linear",

                width: "400",
                height: "400",
                style: "width: 400px; height: 400px;"

            }

            this.model.autoUpdate = true;

            //if (!this.type.class.singletonModelChanged)
            //    this.type.class.singletonModelChanged = this.controller.modelChanged.bind(this.controller);
            //this.controller.modelChanged = this.modelChanged;

            return this;
        }

        /*

        modelChanged(changeEvent, data) {
            console.log("modelChanged");
            let name = data.property.toDash();

            switch (data.property) {
                case "minValue":
                case "maxValue":
                case "majorTicksStepRate":
                        changeEvent.source.ucpComponent.recalculateMajorTicks();
                    break;

            }



            let element = changeEvent.source.ucpComponent.documentElement;
            let currentValue = element.getAttribute(name);

            let newValue = new String(data.newValue).toString();
            changeEvent.source.value[data.property] = newValue;
            if (!currentValue) {
                name = "data-" + name;
                currentValue = element.getAttribute(name);
                element.setAttribute(name, newValue);

                return;
            }
            if (changeEvent.source.ucpComponent.modelChanged !== changeEvent.source.type.class.singletonModelChanged)
                 changeEvent.source.type.class.singletonModelChanged(changeEvent, data);

        }
        */

        recalculateMajorTicks() {
            let newMajorTicks = this.model.minValue;
            let inc = parseInt(this.model.majorTicksStepRate);
            let current = parseInt(this.model.minValue) + inc;
            let max = parseInt(this.model.maxValue);
            while (current <= max) {
                newMajorTicks += ", " + current;
                current += inc;
            }
            this.model.majorTicks = newMajorTicks;
            let element = this.defaultView.currentDomElement;
            if (element) {
                    element.setAttribute("data-min-value", this.model.minValue);
                    element.setAttribute("data-max-value", this.model.maxValue);
                    element.setAttribute("data-major-ticks", newMajorTicks);
            }
            //this.modelChanged({ source: this.ucpModel }, { property: "majorTicks", newValue: newMajorTicks })
            //this.defaultView.update();
        }


        updateView(view, updateObject) {
            console.log("updateView");
            if (view instanceof DefaultView) {
                Object.keys(updateObject).forEach(
                    property => {

                        let name = property.toDash();
                        let data = updateObject[property];


                        switch (property) {
                            case "minValue":
                            case "maxValue":
                            case "majorTicksStepRate":
                                view.ucpComponent.recalculateMajorTicks();
                                break;
                            /* recursion!!!
                            case "majorTicks":
                                    changeEvent.source.ucpComponent.recalculateMajorTicks();
                                    return;
                                break;
                                */

                        }


                        let element = view.currentDomElement;
               
                        let currentValue = element?element.getAttribute(name):null;

                        let newValue = new String(data.to).toString();
                        //view.ucpModel.value[data.property] = newValue;
                        if (!currentValue && element) {
                            name = "data-" + name;
                            currentValue = element.getAttribute(name);
                            element.setAttribute(name, newValue);
                            view.willReplaceAfterUpdateView = false;
                            return;
                        }
                        else {
                            view.willReplaceAfterUpdateView = true;
                            element = view.ucpComponent.documentElement;
                            element.setAttribute(name, newValue);
                        }
                    });
            }
        }



    }
);