import Component from '@ember/component';
import { computed } from '@ember/object';
import d3TimeFormat from 'd3-time-format';

export default Component.extend({
  timerTicks: 0,

  startTimer: function() {
    this.set(
      'timer',
      setInterval(() => {
        this.incrementProperty('timerTicks');

        const ref = this.get('lineChartLive');
        ref.addObject({ ts: Date.now(), val: Math.random() * 30 + 20 });
        if (ref.length > 60) {
          ref.splice(0, ref.length - 60);
        }

        if (this.get('timerTicks') % 2 === 0) {
          const ref2 = this.get('metrics');
          const prev = ref2.length ? ref2[ref2.length - 1].value : 0.9;
          ref2.addObject({
            timestamp: Date.now(),
            value: Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0), 1),
          });
          if (ref2.length > 300) {
            ref2.splice(0, ref2.length - 300);
          }

          const ref3 = this.get('metrics2');
          const prev2 = ref3.length ? ref3[ref3.length - 1].value : 0.1;
          ref3.addObject({
            timestamp: Date.now(),
            value: Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 1),
          });
          if (ref3.length > 300) {
            ref3.splice(0, ref3.length - 300);
          }
        }
      }, 500)
    );
  }.on('init'),

  willDestroy() {
    clearInterval(this.get('timer'));
  },

  lineChartData: computed(() => {
    return [
      { year: 2010, value: 10 },
      { year: 2011, value: 10 },
      { year: 2012, value: 20 },
      { year: 2013, value: 30 },
      { year: 2014, value: 50 },
      { year: 2015, value: 80 },
      { year: 2016, value: 130 },
      { year: 2017, value: 210 },
      { year: 2018, value: 340 },
    ];
  }),

  lineChartMild: computed(() => {
    return [
      { year: 2010, value: 100 },
      { year: 2011, value: 90 },
      { year: 2012, value: 120 },
      { year: 2013, value: 130 },
      { year: 2014, value: 115 },
      { year: 2015, value: 105 },
      { year: 2016, value: 90 },
      { year: 2017, value: 85 },
      { year: 2018, value: 90 },
    ];
  }),

  lineChartLive: computed(() => {
    return [];
  }),

  metrics: computed(() => {
    return [];
  }),

  metrics2: computed(() => {
    return [];
  }),

  secondsFormat() {
    return d3TimeFormat.timeFormat('%H:%M:%S');
  },
});