import { ElementRef, Input } from "@angular/core";

export type MapIconShapeTypes = "circle" | "square" | "star" | "penta";
export type CustomCtrlPositions = "topright" | "topleft" | "bottomright" | "bottomleft";
export type PathDisplayTypes = "polyline" | "polygon" | "rectangle" | "circle";
export type GeoItemTypes = "Point" | "LineString" | "Polygon" | "MultiPoint" | "MultiLineString" | "MultiPolygon" | "GeometryCollection" | "Feature" | "FeatureCollection";
export type arraySizeOfTwo = [number, number];

export enum MapDisplayTypes {
  Point,
  Area,
  Heat,
  ColorFullPoint,
  Routing,
  Line,
  GeoJson
}
export interface IMapItem {
  lat: number;
  lng: number;
  weight: number; // 0-1
  route: Array<IMapItem>;
  hint: string;
  balloon: string;
  icon: {
    url: string;
    caption: string;
    color: string;
    size: arraySizeOfTwo; // [width,height]
    class: { // BootStrapt3, FontAwesome 4.x & 5.x, Semantic UI 2.x, Ion Icon 2.x
      icon: string;
      iconColor: string; // 'white', 'black' or css code (hex, rgba etc)
      iconRotation: number;
      innerHTML: string;
      markerColor: string; // 'red', 'orange-dark', 'orange'
      shape: MapIconShapeTypes;
      extraClasses: string;
      svg: boolean;
    },
    animate: {
      color: string;
      fillColor: string;
      size: arraySizeOfTwo; // [width,height]
      animate: boolean;
      heartbeat: number;
    }
  }
  searchText: string;
  filterText: string;
  custom: any;
}
export interface ICustomCtrlSettings {
  id?: string,
  title?: string,
  classes?: string, // css class
  style?: object,
  position: CustomCtrlPositions;
  content: string;
  datas?: object,
  events: object;
}
export interface ISwoopySettings {
  fromLatlng: arraySizeOfTwo; // [lng,lat]
  toLatlng: arraySizeOfTwo; // [lng,lat]
  color: string;
  weight: string; // (Default = 1) Weight of the arrow.
  opacity: number; // (Default = 1)	Opacity of the arrow.
  factor: number; // (Default = .5) The higher the factor the more curved is the arrow.
  arrowFilled: boolean; // (Default = false) Define the style of the arrow head.
  hideArrowHead: boolean; // (Default = false)
  minZoom: number;
  maxZoom: number;
  label: string;
  labelColor: string;
  labelClassName: string;
  labelFontSize: number;
  html: string;
  iconAnchor: arraySizeOfTwo; // (Default = [0,0]) Point of the icon which will correspond to marker position
  iconSize: arraySizeOfTwo; // (Default = [50,20]) Size of the text in pixels. We are using a Leaflet divIcon in order to create the text.
  keyboard: boolean; // (Default = true) Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
}
export interface ITempViewerSettings {
  StartDate: any; // date or long -> ISO 8601
  EndDate: any; // date or long -> ISO 8601
  Period: string; // ISO 8601
}
export interface IContextMenuItem {
  text: string;
  icon: string; // url
  callback: Function;
  separator: boolean;
}
export interface IPathSettings {
  use: any;
  type: PathDisplayTypes; // polyline(default)
  delay: number;
  weight: number;
  dashArray: arraySizeOfTwo; // [x,y]
  color: string;
  pulseColor: string;
  radius?: number;
  fillColor?: string;
  fillOpacity?: number;
}
export interface IAirwayItem {
  from: arraySizeOfTwo; // [lng,lat]
  to: arraySizeOfTwo; // [lng,lat]
  labels: Array<string>; // ["",""]
  color: string;
  value: number; // 0-20
}
export interface IScatterChartOptions {
  data: Array<object>; // maybe will remove, map data series will use!
  series: {
    valueX: { field: string, axis: string },
    valueY: { field: string, axis: string }
  };
}
export interface IGeoJsonSettings {
  style?: (e) => { fillColor: string, weight: number, opacity: number, color: string, dashArray: string, fillOpacity: number };
  onEachFeature?: Function
}
export interface IGeoJsonItem {
  type: GeoItemTypes;
  id: string;
  properties: any;
  geometry: {
    type: GeoItemTypes;
    coordinates: Array<any>; // [lng,lat]
    /**
     * Point -> array2length - [100.0, 0.0]
     * MultiPoint | LineString -> Array<array2length> [[100.0, 0.0]]
     * Polygons | MultiLineStrings -> Array<Array<array2length>> [[[100.0, 0.0]]]
     * MultiPolygons -> Array<Array<Array<array2length>>> [[[[100.0, 0.0]]]]
     */
  }
}
export interface IGeoJsonData {
  type: GeoItemTypes;
  features: Array<IGeoJsonItem>;
  /**
   * 
   *  {
          "type": "FeatureCollection",
          "features": [
        {
              "type": "Feature",
              "geometry": {
                  "type": "LineString",
                  "coordinates": [
                      [102.0, 0.0],
                      [103.0, 1.0]
                  ]
              },
              "properties": { }
          }, 
        {
              "type": "Feature",
              "geometry": {
                  "type": "Polygon",
                  "coordinates": [
                      [
                          [100.0, 0.0],
                          [101.0, 0.0]
                      ]
                  ]
              },
              "properties": { }
          }]
      }
   * 
   *    {
          "type": "GeometryCollection",
          "geometries": [
            {
              "type": "Point",
              "coordinates": [100.0, 0.0]
            }, 
            {
              "type": "LineString",
              "coordinates": [
                  [101.0, 0.0],
                  [102.0, 1.0]
              ]
            }
          ]
        }
   */
}

export abstract class BaseMapClass {
  constructor(element: ElementRef) { }

  @Input("rd-type") type: MapDisplayTypes;
  @Input("rd-data") data: Array<IMapItem> | IGeoJsonData = [];
  @Input("rd-height") height: number = 300;

  abstract setPointMap(type?: MapDisplayTypes);
  abstract setAreaMap();
  abstract setHeatMap();
  abstract setRoutingMap();
  abstract setLineMap();
  abstract setGeoJson();

  setCenter(data: Array<IMapItem> | IGeoJsonData, mapType: string) {
    let center: any;
    let avgLat: number = 0;
    let avgLng: number = 0;

    if (!(data as Array<IMapItem>).length) {
      if (mapType == "gmap") center = { lat: 39, lng: 34 }
      else center = [39, 34];
    }
    else {
      for (let item of data as Array<IMapItem>) {
        avgLat += (<IMapItem>item).lat;
        avgLng += (<IMapItem>item).lng;
      }

      avgLat /= (<Array<IMapItem>>data).length;
      avgLng /= (<Array<IMapItem>>data).length;

      if (mapType == "gmap") center = { lat: avgLat, lng: avgLng }
      else center = [avgLat, avgLng];
    }

    return center;
  }

  setMapDisplay(type: MapDisplayTypes) {
    switch (type) {
      case MapDisplayTypes.Point:
      case MapDisplayTypes.ColorFullPoint:
        this.setPointMap(type);
        break;
      case MapDisplayTypes.Area: this.setAreaMap();
        break;
      case MapDisplayTypes.Heat: this.setHeatMap();
        break;
      case MapDisplayTypes.Routing: this.setRoutingMap();
        break;
      case MapDisplayTypes.Line: this.setLineMap();
        break;
      case MapDisplayTypes.GeoJson: this.setGeoJson();
        break;
    }
  }
}