import { Component,Input,Output,EventEmitter } from '@angular/core';
import { IItemLayer } from '../../../models/item.layer';

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

export class LayerListComponent  {
  @Input() itemLayers: IItemLayer[] = [];
  @Input() baseLayers = false;
  @Input() dataLayers = false;
  @Output() onToggleVisibility = new EventEmitter<IItemLayer>();
  @Output() onSetOpacity = new EventEmitter<{layer: IItemLayer,opacity:number }>();
  @Output() onDelete = new EventEmitter<IItemLayer>();
  @Output() onZoomToExtent = new EventEmitter<IItemLayer>();
  @Output() onSelectLayer = new EventEmitter<IItemLayer>();
  @Input() selectedLayer: IItemLayer;

  constructor( ) {
  }

  handleDelete(event:MouseEvent, item:IItemLayer) {
    this.onDelete.emit(item);
    event.preventDefault();
  }

  handleToggleVisibility(event:MouseEvent, item: IItemLayer) {
    this.onToggleVisibility.emit(item);
    item.legendVisible = item.visible && item.legendVisible;
    event.preventDefault();
  }

  handleSetOpacity(event: MouseEvent, layer: IItemLayer,opacity:number) {
    this.onSetOpacity.emit({ layer,opacity });
    event.preventDefault();
  }

  handleZoomToExtent(event: MouseEvent, item: IItemLayer) {
    this.onZoomToExtent.emit(item);
    event.preventDefault();
  }

  handleSelectLayer(event: MouseEvent, item: IItemLayer) {
    this.onSelectLayer.emit(item);
    event.preventDefault();
  }

  firstLayer(item: IItemLayer): any {
    if (item && item.item && item.item.data && item.item.data.layers && item.item.data.layers.length > 0) return item.item.data.layers[0];
    return null;
  }

  toggleLegend(event: MouseEvent, lg: boolean) {  
    event.preventDefault();
    return !lg;
  }

  handleLegendClick(event: MouseEvent, item: IItemLayer) {
    this.onSelectLayer.emit(item);
    this.onZoomToExtent.emit(item);
    event.preventDefault();
  }
}