import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';
import { AddressDto } from '../../models/address.dto';

@Component({
  selector: 'app-office-address-list',
  templateUrl: './office-address-list.component.html',
  styleUrls: ['./office-address-list.component.css']
})
export class OfficeAddressListComponent implements OnInit {

  @Input('initial-city')initialCity;
  @Input('offices') addresses:Array<AddressDto> = new Array();
  @Output('search-near') searchNearEvent = new EventEmitter();
  @Output('select-office') selectOfficeEvent = new EventEmitter();
  @Output('next-called') nextCalledEvent = new EventEmitter();
  public listDropped:boolean = false;
  private selectedAddress:AddressDto  = null;
  public searchText:string ='';

  constructor() {
    
   }

  ngOnInit() {
  }

  showList(){
    this.listDropped = !this.listDropped;
  }

  findOnCity(){
    this.searchNearEvent.emit(this.searchText);
  }

  public selectAddress(address:AddressDto){
    this.addresses.forEach(address => {
      address.selected = false;
    })
    address.selected = !address.selected;
    this.selectedAddress = address;
    if(address.selected){
      this.selectOfficeEvent.emit(this.selectedAddress);
    }
  }

  public get showListText(){
    return this.listDropped ? 'CERRAR': 'VER LISTA';
  }

  public get showMobileIcon(){
    return this.listDropped ?
    'group-off'
     : 'group-on'
     ;
  }

  public getIconForAddress(address:AddressDto){
    return address.selected ? 
     'on-icon' 
    : 'off-icon'
  }

  public onNext(){
    this.nextCalledEvent.emit(this.selectedAddress);
  }

}