import { Component, OnInit,  OnChanges, SimpleChanges } from '@angular/core';
import {IItemLayer} from '../../models/item.layer';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import {createEmpty,extend } from 'ol/extent';
import { Observable } from 'rxjs';

@Component({
  selector: 'fm-map-layer-switcher',
  templateUrl: './layer-switcher.component.html',
  styleUrls: ['./layer-switcher.component.scss']
})
export class LayerSwitcher  implements OnInit,OnChanges{

  public showLayerSwitcher:Observable<boolean>;
  public overlayLayers: Observable<Array<IItemLayer>>;
  public selectedOverlayLayer: Observable<IItemLayer>;
  public selectedItemLayer$: Observable<IItemLayer>;
  public baseLayers: Observable<Array<IItemLayer>>;
  public selectedBaseLayer: Observable<IItemLayer>;

  constructor( private store: Store<mapReducers.State>) {
  }

  ngOnInit() { 
    this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
    this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
    this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
    this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
    this.selectedItemLayer$ = this.store.select(mapReducers.selectGetSelectedItemLayer)
    this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
  }

  ngOnChanges(changes: SimpleChanges) {
  }



  handleClick(event:Event) {
    event.stopPropagation();
    this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
  }

  close(event:Event) {
    event.stopPropagation();
    this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
  }



  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));
  }

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

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

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

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

  handleToggleShowDatalayerSlide(event:Event) {
    this.store.dispatch(new mapActions.ShowLayerSwitcher(false));    
    this.store.dispatch(new mapActions.ToggleShowDataLayerSlide());
    event.preventDefault();
  }
}