import { Component, NgZone, ElementRef, AfterViewInit } from '@angular/core';
import { RdLib } from '../../../base/rdLib';
import { BaseAmChart } from './baseAmChart';
import { Portlet } from '../../portlet/portlet';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

@Component({
  selector: 'rd-amchart-clock',
  template: `
    <div id="amChart" style="width:100%" [style.height.px]="height"></div>
    <div style="text-align:center">
      <rd-value rd-type="text" [(rd-model)]="dateString"></rd-value>
    </div>
  `
})
export class AmChartClock extends BaseAmChart implements AfterViewInit {
  constructor(zone: NgZone, public element: ElementRef, portlet: Portlet) {
    super(zone, element, portlet);
  }

  dateString: string;
  chart: am4charts.GaugeChart

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      this.chart = am4core.create(this.container, am4charts.GaugeChart);
      this.chart.hiddenState.properties.opacity = 0;

      this.chart.startAngle = -90;
      this.chart.endAngle = 270;

      let axis = this.chart.xAxes.push(<any>new am4charts.ValueAxis());
      axis.min = 0;
      axis.max = 12;
      axis.strictMinMax = true;

      axis.renderer.line.strokeWidth = 5;
      axis.renderer.line.strokeOpacity = 1;
      axis.renderer.minLabelPosition = 0.05;
      axis.renderer.inside = true;
      axis.renderer.labels.template.radius = 35;
      axis.renderer.axisFills.template.disabled = true;
      axis.renderer.grid.template.disabled = true;
      axis.renderer.ticks.template.length = 12;
      axis.renderer.ticks.template.strokeOpacity = 1;

      let range = axis.axisRanges.create();
      range.startValue = 0;
      range.endValue = 12;
      range.grid.visible = false;
      range.tick.visible = false;
      range.label.visible = false;

      let axisFill = range.axisFill;
      axisFill.fillOpacity = 1;
      axisFill.disabled = false;
      axisFill.fill = new am4core.InterfaceColorSet().getFor("fill");

      let hourHand = this.chart.hands.push(new am4charts.ClockHand());
      hourHand.radius = am4core.percent(60);
      hourHand.startWidth = 7;
      hourHand.endWidth = 1;
      hourHand.rotationDirection = "clockWise";
      hourHand.pin.radius = 8;
      hourHand.zIndex = 0;

      let minutesHand = this.chart.hands.push(new am4charts.ClockHand());
      minutesHand.rotationDirection = "clockWise";
      minutesHand.startWidth = 5;
      minutesHand.endWidth = 1;
      minutesHand.radius = am4core.percent(78);
      minutesHand.zIndex = 1;

      let secondsHand = this.chart.hands.push(new am4charts.ClockHand());
      secondsHand.fill = am4core.color("#DD0000");
      secondsHand.stroke = am4core.color("#DD0000");
      secondsHand.radius = am4core.percent(85);
      secondsHand.rotationDirection = "clockWise";
      secondsHand.zIndex = 2;
      secondsHand.startWidth = 1;

      let updateDate = function () {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

        this.dateString = RdLib.typeOperations.dateToString(date, "time");

        hourHand.showValue(hours + minutes / 60, 0);
        minutesHand.showValue(12 * (minutes + seconds / 60) / 60, 0);
        secondsHand.showValue(12 * date.getSeconds() / 60, 300);
      }.bind(this)

      setInterval(() => { updateDate(); }, 1000);
    })
  }
}