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';
import { Browser } from './browser';
/**
 *  UI 秀出左右兩邊多選項目,
 *  當左邊選取項目後,可以按 > >> << < 按鈕 來操作右邊項目
 *  @author GYC
 *  @date 2018/11/27
 */
@Component({
    selector: 'esb-multiple-select-shift-item',
    templateUrl: './esb-multiple-select-shift-item.component.html',
    encapsulation: ViewEncapsulation.None
})
export class EsbMultipleSelectShiftItemComponent  implements OnInit, OnDestroy, OnChanges {

    /**
     * 左邊多選單 被選取的物件
     */
    selectedItemsLeft: Array<any> = [];

    /**
     * 左邊多選單 全部可選的物件
     */
    @Input('itemsLeft') itemsLeft: Array<any> = [];
    
     /**
     * 右邊多選單 可選的物件
     */
    itemRight: Array<any> = [];
    /**
     * 右邊多選單 被選取的物件
     */
    @Input() selectedItemsRight: Array<any> = [];

    /**
     * for IE/CRHOME style css
     */
    multiSelectSytleExtra: boolean = false;   

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

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

    }

    ngOnChanges(changes: SimpleChanges) {

        if (changes.itemsLeft) {
            this.itemsLeft = changes.itemsLeft.currentValue;
        }
        if (changes.selectedItemsRight) {
            this.itemRight = changes.selectedItemsRight.currentValue;
        }

    }


    ngOnInit() {

        let browser: Browser = this.esbService.getBrowser();
        this.multiSelectSytleExtra = browser.name === 'IE' ? false : true;
        this.multiSelectSytleExtra =  true;
    }

    ngOnDestroy() {

    }


    /**
     * 移除右邊選單選取的項目
     */
    removeSelectedRightItem() {

        let rightItemTmp = [];
        for (let item of this.itemRight) {
            if (!item.checked) {
                rightItemTmp.push(item);

            }
        }
        this.itemRight = rightItemTmp;
        this.selectChange.emit(this.itemRight);
    }

    /**
     * 移除所有選取的項目
     */
    cleanLeftSelectedItem() {

        let resetMultiSelectSubscriptions: Subscription = this.esbDispatchService.broadcast('esbMultiShiftItemReset', {}).subscribe((result) => {

        }, (error) => { },
            () => {
                this.selectedItemsLeft = [];
                resetMultiSelectSubscriptions.unsubscribe();

            });

    }
    /**
     * 把左邊全部的項目,複製到右邊選單
     */
    allLeftItemToRight() {

        let itemRightTmp = [];

        for (let selectedItem of this.itemsLeft) {
            let newItem = cloneDeep(selectedItem);
            delete newItem['checked'];
            itemRightTmp.push(newItem);
        }
        this.itemRight = itemRightTmp;
        this.cleanLeftSelectedItem();
        this.selectChange.emit(this.itemRight);
    }

    /**
     * 移除全部右邊選單
     */
    removeAllRightItem() {

        this.itemRight = [];
        this.cleanLeftSelectedItem();
        this.selectChange.emit(this.itemRight);
    }


    /**
     * 把左邊選取的項目,複製到右邊選單
     */
    selectedLeftItemToRight() {

        let itemRightTmp = [];
       
        for (let item of this.itemRight) {
            itemRightTmp.push( cloneDeep(item));
        }
      
        for (let selectedItem of this.selectedItemsLeft) {
            let isExisted = false;
            let newItem =   cloneDeep(selectedItem);
            delete newItem['checked'];
            if (this.itemRight.length === 0) {
                itemRightTmp.push(newItem);
            } else {
                for (let item of this.itemRight) {

                    if (item.value === newItem.value) {
                        isExisted = true;
                        break;
                    }
                }
                if (!isExisted) {
                    itemRightTmp.push(newItem);
                }
            }


        }
        this.itemRight = itemRightTmp;
        this.cleanLeftSelectedItem();
        this.selectChange.emit(this.itemRight);

    }

    /**
     * 接收使用者所選取項目
     * @param itemsLeftSelected 物件 格式為[{ label:'XXX'+i,value:'XXX'}]
     */
    itemsLeftSelectChange(itemsLeftSelected: any) {
        this.selectedItemsLeft = itemsLeftSelected;
    }

    itemRightSelectChange(itemsLeftSelected: any) {

    }


}