import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit,ChangeDetectorRef,NgZone } from '@angular/core';
import { Location } from '@angular/common';
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
import { Store } from '@ngrx/store';
//import { proj,Map } from 'openlayers';

// Map
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { IMapState} from '../../models/map.state';
import { ISelectedFeatures } from '../../models/selected.features';
import { IItemLayer } from '../../models/item.layer';
import { IQueryState } from '@farmmaps/common';
import { IPeriodState } from '../../models/period.state';
import {IStyles} from '../../models/style.cache';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
import { StateSerializerService } from '@farmmaps/common';
import { GeolocationService} from '../../services/geolocation.service';
import {DeviceOrientationService} from '../../services/device-orientation.service';

// AppCommon
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
import { IItemType, IItem } from '@farmmaps/common';
import {commonReducers} from '@farmmaps/common';
import {commonActions} from '@farmmaps/common';

import {Feature} from 'ol';
import {Extent,createEmpty,extend } from 'ol/extent';
import {transform} from 'ol/proj';
import { query } from '@angular/animations';
import { tassign } from 'tassign';
import * as style from 'ol/style';


@Component({
  selector: 'fm-map-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
  title: string = 'Map';
  public openedModalName$: Observable<string> = this.store.select(commonReducers.selectOpenedModalName);
  public itemTypes$: Observable<{ [id: string]: IItemType }>;
  public mapState$: Observable<IMapState> = this.store.select(mapReducers.selectGetMapState);
  public features$: Observable<Array<Feature>> = this.store.select(mapReducers.selectGetFeatures);
  public overlayLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetOverlayLayers);
  public selectedOverlayLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
  public selectedItemLayer$: Observable<IItemLayer> = this.store.select(mapReducers.selectGetSelectedItemLayer);
  public baseLayers$: Observable<Array<IItemLayer>> = this.store.select(mapReducers.selectGetBaseLayers);
  public selectedBaseLayer$: Observable<IItemLayer> =  this.store.select(mapReducers.selectGetSelectedBaseLayer);
  public projection$: Observable<string> = this.store.select(mapReducers.selectGetProjection);
  public selectedFeatures$: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
  public droppedFile$: Subject<IDroppedFile>  = new Subject<IDroppedFile>();
  private paramSub: Subscription;
  private itemTypeSub: Subscription;
  private mapStateSub: Subscription;
  private queryStateSub: Subscription;
  public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
  public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
  public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
  public selectedFeature$: Observable<Feature> = this.store.select(mapReducers.selectGetSelectedFeature);
  public selectedItem$: Observable<IItem> = this.store.select(mapReducers.selectGetSelectedItem);
  public queryState$: Observable<IQueryState> = this.store.select(mapReducers.selectGetQueryState);
  public period$: Observable<IPeriodState> = this.store.select(mapReducers.selectGetPeriod);
  public clearEnabled$: Observable<boolean> = this.store.select(mapReducers.selectGetClearEnabled);
  public searchCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchCollapsed);
  public searchMinified$: Observable<boolean> = this.store.select(mapReducers.selectGetSearchMinified);
  public menuVisible$: Observable<boolean>;
  public query$: Observable<IQueryState> =  this.store.select(mapReducers.selectGetQuery);
  public position$: Observable<Position> = this.geolocationService.getCurrentPosition();
  public compassHeading$: Observable<number> = this.deviceorientationService.getCurrentCompassHeading();
  public baseLayersCollapsed:boolean = true;
  public overlayLayersCollapsed: boolean = true;
  public extent$: Observable<Extent> = this.store.select(mapReducers.selectGetExtent);
  public styles$:Observable<IStyles> = this.store.select(mapReducers.selectGetStyles);
  private setStateCount$:Observable<number> =  this.store.select(mapReducers.selectgetSetStateCount);

  @ViewChild('map') map;
  
  constructor(private store: Store<mapReducers.State | commonReducers.State>, 
    private route: ActivatedRoute, 
    private router: Router,
    private uploadService: ResumableFileUploadService, 
    private serializeService: StateSerializerService, 
    public itemTypeService: ItemTypeService, 
    private location: Location, 
    private geolocationService: GeolocationService,
    private zone: NgZone,
    private deviceorientationService:DeviceOrientationService) {
  }

  @HostListener('document:keyup', ['$event'])
  escapeClose(event: KeyboardEvent) {
    let x = event.keyCode;
    if (x === 27) {
      this.handleCloseModal()
    }
  }

  handleOpenModal(modalName: string) {
    this.store.dispatch(new  commonActions.OpenModal(modalName));
  }

  handleCloseModal() {
    this.store.dispatch(new commonActions.CloseModal());
  }

  handleFileDropped(droppedFile: IDroppedFile) {
    this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
  }

  handleFeaturesSelected(feature: Feature) {
    if (feature) {
      let newQuery = tassign(mapReducers.initialQueryState, { parentCode: feature.get('parentCode'), itemCode: feature.get('code'),itemType:feature.get('itemType') });
      this.store.dispatch(new mapActions.DoQuery(newQuery));
    }
  }

  handleSearch(queryState: IQueryState) {
    this.store.dispatch(new mapActions.DoQuery(queryState));
  }

  ngOnInit() {
    this.store.dispatch(new mapActions.Init());   
    this.selectedFeatures$.next({x:0,y:0,features:[]});
    this.selectedFeatures$.next(null);
    this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
      if(setStateCount>0) {
        this.replaceUrl(mapState,queryState,false);
      }
    });   
    this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{
      if(setStateCount>0) {
        this.replaceUrl(mapState,queryState,true);
      }
    });    
    this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
      if(setStateCount>0) {
        this.replaceUrl(mapState,queryState,true);
      }
    }) 
  }

  initCustomStyles() {
    this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer',new style.Style({
      stroke: new style.Stroke({
        color: 'red',
        lineDash: [ 5,5],
        width: 1
      }),
      geometry:(feature) =>feature.getGeometry()
    })));
    this.store.dispatch(new mapActions.SetStyle('vnd.farmmaps.itemtype.layer_selected',new style.Style({
      stroke: new style.Stroke({
        color: 'red',
        lineDash: [ 5,5],
        width: 3
      }),
      geometry:(feature) =>feature.getGeometry()
    })));
  }

  ngAfterViewInit() {    
    this.initCustomStyles();   
    this.paramSub = this.route.paramMap.pipe(withLatestFrom(this.setStateCount$),withLatestFrom(this.queryState$),withLatestFrom(this.mapState$)).subscribe( ([[[params,setStateCount],lastQueryState],lastMapState]) => {
      var newMapState: IMapState = lastMapState;
      var newQueryState: IQueryState = lastQueryState;
      var mapStateChanged = false;
      var queryStateChanged = false;
      if (params.has("xCenter") && params.has("yCenter")) {
        let xCenter = parseFloat(params.get("xCenter"));
        let yCenter = parseFloat(params.get("yCenter"));
        let zoom = parseFloat(params.get("zoom"));
        let rotation = parseFloat(params.get("rotation"));
        let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
        newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
        window.localStorage.setItem("FarmMapsCommonMap_mapState",JSON.stringify(newMapState));
      }
      if (params.has("queryState")) {
        let queryState = params.get("queryState");
        newQueryState = tassign(mapReducers.initialQueryState);
        if (queryState != "") {
          newQueryState = this.serializeService.deserialize(queryState);
          queryState = this.serializeService.serialize(newQueryState);
        }
        queryStateChanged = this.serializeService.serialize(lastQueryState) !=  queryState;
      }     
      let t =0;
      if(setStateCount==0) t=600;
      setTimeout(() => {
        this.zone.run(()=> {
          if (setStateCount ==0) {
            this.store.dispatch(new mapActions.SetState(newMapState,newQueryState));
          } else if(queryStateChanged) {
            this.store.dispatch(new mapActions.SetQueryState(newQueryState));
          } 
        })
      },t);                
    });
    setTimeout(() => {
      this.map.instance.updateSize();
    }, 500);
  }

  handleSearchCollapse(event) {
    this.store.dispatch(new mapActions.CollapseSearch());
  }

  handleSearchExpand(event) {
    this.store.dispatch(new mapActions.ExpandSearch());
  }

  handleToggleMenu(event) {
    this.store.dispatch(new commonActions.ToggleMenu());
  }

  handleToggleBaseLayers(event:MouseEvent) {
    this.baseLayersCollapsed = !this.baseLayersCollapsed;
    event.preventDefault();
  }

  handleToggleOverlayLayers(event: MouseEvent) {
    this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
    event.preventDefault();
  }

  handlePredefinedQuery(event: MouseEvent, query: any) {
    event.preventDefault();
    var queryState = tassign(mapReducers.initialQueryState, query);
    this.store.dispatch(new mapActions.DoQuery(queryState));
  } 

  replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
      let parts =["."];
      parts.push(mapState.xCenter.toFixed(5));
      parts.push(mapState.yCenter.toFixed(5));
      parts.push( mapState.zoom.toFixed(0));
      parts.push( mapState.rotation.toFixed(2));
      if(mapState.baseLayerCode!="") {
        parts.push(mapState.baseLayerCode);
        parts.push( this.serializeService.serialize(queryState));
        this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
      }      
  }

  handleOnMoveEnd(event) {
    this.zone.run(() =>{
      var map = event.map;
      var view = map.getView();
      var rotation = view.getRotation();
      var zoom = view.getZoom();
      var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
      var extent = view.calculateExtent(this.map.instance.getSize());
      let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
      let state = { mapState: mapState, extent: extent };
      let source = from([state]);
      source.pipe(withLatestFrom(this.selectedBaseLayer$),withLatestFrom(this.setStateCount$)).subscribe(([[state, baselayer],setStateCount]) => {
        if (mapState && baselayer && setStateCount > 0) { // do not react on first move
          let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
          this.store.dispatch(new mapActions.SetMapState(newMapState));
          this.store.dispatch(new mapActions.SetViewExtent(state.extent));
        }
      });
    });   
  }

  handleOnMouseDown(event: MouseEvent) {
    this.zone.run(() =>{
      this.store.dispatch(new mapActions.CollapseSearch());
    });
  }

  handleOnDownload(event) {

  }

  handleClearSearch(event) {
    this.store.dispatch(new commonActions.Escape(true, false));
  }  

  handleOnDelete(itemLayer: IItemLayer) {
    this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
  }

  handleOnToggleVisibility(itemLayer: IItemLayer) {
    this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
  }

  handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
    this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
  }

  handleZoomToExtent(itemLayer: IItemLayer) {
    var extent =  createEmpty();
    extend(extent, itemLayer.layer.getExtent());
    if (extent) {
      this.store.dispatch(new mapActions.SetExtent(extent));
    }    
  }

  handleSelectBaseLayer(itemLayer: IItemLayer) {
    this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
  }

  handleSelectOverlayLayer(itemLayer: IItemLayer) {
    this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
  }

  ngOnDestroy() {
    this.paramSub.unsubscribe();
    if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
    if (this.mapStateSub) this.mapStateSub.unsubscribe();
    if (this.queryStateSub) this.queryStateSub.unsubscribe();  }
}