import { Component, NgZone, ElementRef, Input, OnChanges, AfterViewInit } from "@angular/core";
import { Portlet } from "../../portlet/portlet";
import { BaseAmChart } from "./baseAmChart";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldHigh from "@amcharts/amcharts4-geodata/worldHigh";
import am4themes_dataviz from "@amcharts/amcharts4/themes/dataviz";

export enum WeatherCast {
  Sunny,
  SunnyRainly,
  Cloudy,
  Rainy,
  SlightlyRainy,
  Downpour,
  Thunder,
  Snowy
}

export interface IWeatherDataItem {
  lat: number;
  lng: number;
  weatherCast: WeatherCast;
  text: string;
}

@Component({
  selector: "rd-amchart-weather",
  template: `
    <div id="amChart" style="width:100%" [style.height.px]="height"></div>
  `
})
export class AmChartWeather extends BaseAmChart implements OnChanges, AfterViewInit {
  constructor(zone: NgZone, public element: ElementRef, portlet: Portlet) {
    super(zone, element, portlet);
  }

  @Input("rd-data") data: Array<IWeatherDataItem> = [];

  chart: am4maps.MapChart;
  imageSeries;

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      am4core.useTheme(am4themes_dataviz);

      this.chart = am4core.create(this.container, am4maps.MapChart);
      this.chart.geodata = am4geodata_worldHigh;
      this.chart.projection = new am4maps.projections.Miller();
      this.chart.zoomControl = new am4maps.ZoomControl();
      this.chart.homeGeoPoint = { longitude: 39, latitude: 34 };
      this.chart.homeZoomLevel = 6;

      let polygonSeries = this.chart.series.push(new am4maps.MapPolygonSeries());
      polygonSeries.useGeodata = true;

      this.imageSeries = this.chart.series.push(new am4maps.MapImageSeries());
      let imageTemplate = this.imageSeries.mapImages.template;
      imageTemplate.propertyFields.longitude = "longitude";
      imageTemplate.propertyFields.latitude = "latitude";
      imageTemplate.nonScaling = true;

      let image = imageTemplate.createChild(am4core.Image);
      image.propertyFields.href = "imageURL";
      image.width = 50;
      image.height = 50;
      image.horizontalCenter = "middle";
      image.verticalCenter = "middle";

      let label = imageTemplate.createChild(am4core.Label);
      label.text = "{label}";
      label.horizontalCenter = "middle";
      label.verticalCenter = "top";
      label.dy = 20;

      this.setData();
    });
  }

  ngOnChanges(changes) {
    if (!this.chart) return;
    if (changes.data) this.setData();
  }

  setData() {
    let avgLat: number = 0;
    let avgLng: number = 0;

    for (let item of this.data) {
      avgLat += item.lat;
      avgLng += item.lng;

      this.imageSeries.data.push({
        "latitude": item.lat,
        "longitude": item.lng,
        "imageURL": this.getWeatherCastIcon(item.weatherCast),
        "width": 32,
        "height": 32,
        "label": item.text
      });
    }

    avgLat /= this.data.length;
    avgLng /= this.data.length;

    this.chart.homeGeoPoint = { longitude: avgLng, latitude: avgLat };
  }

  getWeatherCastIcon(cast) {
    switch (cast) {
      case WeatherCast.Sunny: return 'assets/img/weather/sunny.svg';
      case WeatherCast.SunnyRainly: return 'assets/img/weather/sunnyRainy.svg';
      case WeatherCast.Cloudy: return 'assets/img/weather/cloudy.svg';
      case WeatherCast.Rainy: return 'assets/img/weather/rainy.svg';
      case WeatherCast.SlightlyRainy: return 'assets/img/weather/slightlyRainy.svg';
      case WeatherCast.Downpour: return 'assets/img/weather/downpour.svg';
      case WeatherCast.Thunder: return 'assets/img/weather/thunder.svg';
      case WeatherCast.Snowy: return 'assets/img/weather/snowy.svg';
    }
  }
}