import Ember from 'ember';
import config from '../config/environment';

export default Ember.Component.extend({
  classNames: ['col-md-4'],
  heater: null,
  actions: {
    formSetConsign() {
      let target = this.get('heater.consign');
      let id = this.get('heater.id');
      let data="consign="+target;
      let headers = {"Content-Type": "application/x-www-form-urlencoded"};
      if(config.apiAuth !== ''){
        headers.Authorization = config.apiAuth;
      } 
      fetch(config.api+"/effectors/heaters/"+id,
      { method: "PUT", 
        body: data,
        headers: headers 
      }).then(function(response) {
      if(response.ok) {
        console.debug("Requete OK");
      }});
    },
  },
  // defining graph
  chartOptions: [],
  chartOptions_default: {
    chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Temperature' 
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: -10,
            max: 40,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: '°C'
            },
            plotBands: [{
                from: -10,
                to: 7,
                color: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, 'white'],
                        [1, 'blue']
                    ]
                		}
            },
            {
            		from: 7,
                to: 40,
                color: {
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                    stops: [
                        [0, 'white'],
                        [1, 'red']
                    ]
                		}
            }]
        }
      },
      chartData: [],
      chartData_default: [{
            name: 'Temperature',
            data: [10],
            tooltip: {
                valueSuffix: '°C'
            },
            dataLabels: { enabled: true }
        },
        {
        		name: 'Consign',
        		data: [20],
        		toltip: {
            		valueSuffix: '°C'
            },
            backgroundColor:"blue",
            dataLabels: { enabled: false },
            dial:{
            	backgroundColor: "red",
            	rearLength: 0,
            	baseWidth: 4,
            	radius: "60%"
             }
        }
        ],
    init() {
    this._super();
    let heater = this.get('heater');
    let chartOptions=this.get('chartOptions');
    chartOptions[heater.id] = $.extend( true, {}, this.get('chartOptions_default'));
    chartOptions[heater.id].title.text='Temperature '+heater.name;
    let chartData=this.get('chartData');
    chartData[heater.id] = $.extend( true, [], this.get('chartData_default'));
    chartData[heater.id][0].data=[heater.temp];
    chartData[heater.id][1].data=[heater.consign];
  }

});