import { Component, Input, Output, OnInit, EventEmitter, ViewEncapsulation, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
import { Subscription} from 'rxjs';
import {EsbService} from './esb.service';
import { EsbDispatchService } from './esb-dispatch.service';
import { cloneDeep } from 'lodash';


/**
 *  UI 多選選單
 *  
 *  @author GYC-16048
 *  @date 2018/06/12
 */
@Component({
  selector: 'esb-multiple-select-panel',
  templateUrl: './esb-multiple-select-panel.component.html',
  styleUrls: ['./esb-multiple-select-panel.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class EsbMultipleSelectPanelComponent  implements OnInit, OnDestroy, OnChanges {

  /**
    * 被選取的物件
    */
  selectedItems: Array<any> = [];

  /**
   * 選單可選的物件 格式為 [{ label:'XXX'+i,value:'XXX'}]
   */
  @Input('items') selectItems: Array<any> = [];

  /**
   * 通知外部 使用的元件並傳出 選擇的項目
   */
  @Output()
  selectChange = new EventEmitter<any>();

  /**
   * 訂閱變數
   */
  resetMultiSelectSubscriptions: Subscription;

  constructor(private esbDispatchService:EsbDispatchService,private esbService:EsbService){

  }

  ngOnChanges(changes: SimpleChanges) {
  }


  ngOnInit() {

    /**
     * 註冊事件:是否要清除選取的項目
     */
    this.resetMultiSelectSubscriptions = this.esbDispatchService.listen<any>('esbMultiShiftItemReset')
      .subscribe((job: any) => {
        this.resetSelectedItem();
        this.esbDispatchService.complete('esbMultiShiftItemReset', {});


      });

  }

  ngOnDestroy() {

    this.resetMultiSelectSubscriptions.unsubscribe();
  }



  /**
   * 使用者點選項目事件
   * @param item 使用者點選的項目
   */
  select(item: any) {
  
    item.checked = !item.checked;
    let selectedItemsTmp = [];
    for (let selectedItem of this.selectItems) {
      if (selectedItem.checked) {
        let outItem=cloneDeep(selectedItem);
        delete outItem['checked'];
        selectedItemsTmp.push(outItem);
      }
    }

    this.selectChange.emit(selectedItemsTmp);

  }

  /**
   * 移除選取的項目
   */
  resetSelectedItem() {

    for (let selectedItem of this.selectItems) {
      delete selectedItem['checked'];
    }

  }

}