var Undtec;
(function (Undtec) {
    class StatsType1 extends XojoWeb.XojoVisualControl {
        constructor(id, events) {
            super(id, events);
            const el = this.DOMElement();

            //console.log('init test before render');
            //console.log(this);

            this.create_and_append_canvas_doom(el);

            
        }
        create_and_append_canvas_doom(el) {
            this.canvasChart = document.createElement('canvas');
            //this.buttonEl.type = 'button';
            //this.buttonEl.innerText = 'Untitled';
            //this.buttonEl.classList.add('btn');
            this.canvasChart.id = 'canvas-' + el.id;
            this.canvasChart.classList.add('core-stats-type1-canvas');

            const that = this;
            //console.log(that)

            this.canvasChart.addEventListener('click', function(ev) { that.pressedHandler(ev) });
            //this.canvasChart.addEventListener('click', function(ev) { console.log(that);that.triggerServerEvent('pressed'); });

            this.canvasLegendCommonDiv = document.createElement('div');
            this.canvasLegendCommonDiv.classList.add("custom_legent_text_center_wrap");
            this.canvasLegendCommonDivP = document.createElement('p');
            this.canvasLegendCommonDivP.innerText = "Untitled";
            this.canvasLegendCommonDiv.appendChild(this.canvasLegendCommonDivP);
            el.appendChild(this.canvasLegendCommonDiv);

             el.appendChild(this.canvasChart);
        }

        updateControl(data) {
			//console.log('udate control');
            super.updateControl(data);
            const json = JSON.parse(data);

            if (json.hard_clear) {
                const el = this.DOMElement();
                el.innerText = "";
                this.create_and_append_canvas_doom(el);
            }

            if (typeof json.label_summary !== 'undefined') {
                let gr_title_summary = json.label_summary;
                if (typeof json.title_graph !== 'undefined') {
                    gr_title_summary = json.label_summary + '<br>' + json.title_graph;
                }

                this.canvasLegendCommonDivP.innerHTML = gr_title_summary;
            }

            if (json.datasets) {
            //console.log('new install');
            //console.log(json.datasets);
                const el = this.DOMElement();

                var ctx = this.canvasChart; //document.getElementById("stats-type1-v999G9");

                // And for a doughnut chart
                var myDoughnutChart = new Chart(ctx, {
                "type":"doughnut",
                "data": json.datasets,
                "hover":{"mode":"point","intersect":true},
                //"plugins":{
                //  "legend":{"display":true},
                //  "tooltip":{"enabled":true,"backgroundColor":"rgba(0,0,0,0.00)"}
                //},
                "animation":{"duration":0},
                "maintainAspectRatio":false,

                "options":{
                  "rotation":-90,
                  "circumference":180,
                  "plugins": {
                  //    "htmlLegend": {
                        // ID of the container to put the legend in
                  //      "containerID": 'legend-container',
                  //    },
                      "legend": {
                        "display": false,
                      }
                    }
                },
                //"plugins": [htmlLegendPlugin],
                });

                //this.canvasChart.style.width = el.style.width;
                //this.canvasChart.style.height = el.style.height;

                
                let diameter_el = Math.min(parseInt(el.style.width), parseInt(el.style.height));
                let height_main_element = parseInt(el.style.height);
                let adds_top_points = json.adds_top_points;

                var inner_data = json.datasets.datasets[0].data;
                //console.log(inner_data);
                //stats-type1-point-label

                let sum_data = 0;
                for(var k in inner_data) {
                    sum_data = sum_data + inner_data[k];
                }

                let current_procent = 0;
                let current_point_sum = 0; 
                for(var k in inner_data) {
                   //console.log(inner_data[k]);
                   let current_point_value = inner_data[k];
                   current_point_sum = current_point_sum + current_point_value;

                   let item_procent = (100/sum_data) * inner_data[k];
                   current_procent = current_procent + item_procent;
                   const [left_point, top_point] = this.calculate_xy(diameter_el, current_procent, height_main_element);
                   //console.log(left_point);
                   //console.log(top_point);
                   //console.log('------');

                   let point_label = document.createElement('div');
                   point_label.classList.add('stats-type1-point-label');
                   
                   if (current_procent < 50) {
                        point_label.style.left = parseInt(left_point - 52) + "px";
                        point_label.style.textAlign = "right";
                   } else {
                        point_label.style.left = parseInt(left_point + 2) + "px";
                   }
                   
                   if (current_procent > 40 && current_procent < 60 && diameter_el > 250) {
                        point_label.style.top = parseInt(top_point + adds_top_points - 4) + "px";
                   } else {
                        point_label.style.top = parseInt(top_point + adds_top_points) + "px";
                   }

                   if (current_point_value > 0) {
                       let point_label_span = document.createElement('span');
                       point_label_span.innerText = current_point_sum;
                       point_label.appendChild(point_label_span);
                       el.appendChild(point_label);
                   }
                }
            }

            if (json.new_width_graph && json.new_top_graph)  {
                this.canvasLegendCommonDiv.style.top = json.new_top_graph + "px";
                this.canvasLegendCommonDiv.style.width = json.new_width_graph + "px";
            }


            this.refresh();
        }
        render() {
            super.render();

            // console.log('render');
            const el = this.DOMElement();
            if (!el) {
                return;
            }

            this.setAttributes();
            this.applyUserStyle();
            this.applyTooltip(el);
        }
        pressedHandler(ev) {
            console.log("test");
            this.triggerServerEvent('pressed');
        }

        calculate_xy(diameter, input_procent, height_of_control) {
            let d = diameter;

            //console.log('d');
            //console.log(d);

            let r = d/2;
            let pi = Math.PI;
            let l = pi * d;
            let s = ((100 - input_procent)/2) * l/100;
            let gradus = s / (pi*r/180);
            //console.log('gradus');
            //console.log(gradus);

            let x = r * Math.cos(gradus * Math.PI / 180);
            let y = r * Math.sin(gradus * Math.PI / 180);

            //console.log('x');
            //console.log(x);

            let left_p = x + r;
            //let proc_top = (height_of_control/100) * 17; //18.7;
            let proc_top = (d/100) * 18.7;

            //console.log('proc_top');
            //console.log(proc_top);
            //console.log('height_of_cont');
            //console.log(height_of_control);

            let top_p = r - y + proc_top; //55;

            //console.log('gradus');
            //console.log(left_p);
            //console.log(top_p);
            return [left_p, top_p];
        }
    }
    Undtec.StatsType1 = StatsType1;
})(Undtec || (Undtec = {}));