import {
    Component,
    OnInit,
    ElementRef,
    ChangeDetectorRef,
    Inject,
    Renderer2,
    forwardRef,
    ChangeDetectionStrategy,
    ViewEncapsulation,
    Input,
    Output,
    EventEmitter,
    ViewChild,
    Injector
} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseComboComponent, SelectItem, ComboService } from '@farris/ui-combo-list';
import { TreeComponent } from '@farris/ui-tree';
import { filter, take, skip } from 'rxjs/operators';

export const INPUT_COMBO_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ComboTreeComponent),
    multi: true
};

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'farris-combo-tree',
    templateUrl: './combo-tree.component.html',
    styleUrls: ['./combo-tree.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    providers: [INPUT_COMBO_VALUE_ACCESSOR, ComboService]
})
export class ComboTreeComponent extends BaseComboComponent implements OnInit {
    // tslint:disable-next-line:variable-name
    _treeCmp: ElementRef = null;
    @ViewChild('tt') set treeCmp(cmp: TreeComponent) {
        if (cmp) {
            const treeTable = (cmp as any).treeTable;
            this.comboService.data$
                .pipe(
                    skip(1),
                    take(1),
                    filter(v => !!v)
                )
                .subscribe(data => {
                    this.selectedValues.split(',').map(item => {
                        function eachData(paramData, paramVal, idField) {
                            let rtnData: any = null;
                            paramData.find(d => {
                                // tslint:disable-next-line:triple-equals
                                if (d.data[idField] === paramVal) {
                                    rtnData = d;
                                    return true;
                                } else if (d.children && d.children.length) {
                                    rtnData = eachData(d.children, paramVal, idField);
                                } else {
                                    return false;
                                }
                            });
                            return rtnData;
                        }
                        const filterData = eachData(data, item, this.idField);
                        if (filterData) {
                            const sub = treeTable.loadedData.pipe(take(1)).subscribe(() => {
                                const rowNode = { isSelected: true, isChecked: true, node: filterData, visible: true };
                                treeTable.selectedRow = rowNode.node;
                                treeTable.setSelections(rowNode);
                                treeTable.setCheckeds(rowNode);
                                treeTable.detectChanges();
                                this.comboService.selections = this.comboService.selections.filter(
                                    // tslint:disable-next-line:triple-equals
                                    v => v[this.idField] != filterData.data[this.idField]
                                );
                                if (!this.multiSelect) {
                                    this.comboService.selections = [];
                                }
                                this.comboService.selections.push(filterData.data);
                                this.comboService.selections$.next(filterData.data);
                                sub.unsubscribe();
                            });
                        }
                    });
                });
        }
    }
    @Input() itemTemplate: any;
    @Input() showCheckbox = true;
    /** 显示图标 */
    @Input() showIcon = false;
    /** 显示边框线 */
    @Input() showBorder = false;
    /** 数据加载方式
     * - all: 全部加载
     * - async: 分层加载
     */
    @Input() loadDataType: 'all' | 'async' = 'all';

    /** 当多选时，选中当前行并钩选 */
    @Input() checkOnSelect = true;
    /** 当多选时，钩选并选中当前行 */
    @Input() selectOnCheck = true;
    /**
     * 启用多选时，此属性为true 时，仅当前行选中
     */
    @Input() onlySelectSelf = false;

    /** 设置为true时自适应父容的尺寸 */
    @Input() fit = false;

    /** 启用级联选中功能 */
    @Input() cascadeCheck = true;
    /** 向下级联选中 */
    @Input() cascadeDown = true;
    /** 向上级联选中 */
    @Input() cascadeUp = true;
    /** 空数据时，显示的提示文本 */
    @Input() emptyMessage = '暂无数据';

    /**
     * 单击行选中后，在次点击不会被取消选中状态;
     */
    @Input() keepSelect = true;
    /** 虚拟加载 */
    @Input() virtualized = false;
    /**
     * 仅允许选择叶子节点
     * - default: 应用服务器端传回的设置，如果服务器端没有设置，则与 no 保持一至；
     * - yes: 如果客户端设置为 `yes`, 服务器端的设置失效；
     * - no: 允许选择所有节点；服务器端设置失效
     */
    @Input() onlySelectLeaf: boolean | 'default' | 'yes' | 'no' = 'default';

    /** 叶子节点图标 */
    @Input() leafIcon = 'file';
    /** 节点展开图标 */
    @Input() expandIcon = 'folder-open';
    /** 节点折叠图标 */
    @Input() collapseIcon = 'folder';

    /** 启用远端排序 */
    @Input() remoteSort = true;
    /** 排序方式 asc | desc */
    @Input() sortOrder: string;

    /** 附加按钮TXT */
    @Input() appendText = '';

    /** 附加按钮点击事件 */
    @Output() appendBtnClick: EventEmitter<any> = new EventEmitter();

    /** 选中事件 */
    @Output() nodeSelected: EventEmitter<any> = new EventEmitter();
    /** 取消选中事件 */
    @Output() nodeUnSelect: EventEmitter<any> = new EventEmitter();

    /** 钩选 */
    @Output() nodeChecked: EventEmitter<any> = new EventEmitter();
    /** 取消钩选 */
    @Output() nodeUnChecked: EventEmitter<any> = new EventEmitter();
    /** 查询 */
    @Output() search: EventEmitter<any> = new EventEmitter();

    @Output() dblClick: EventEmitter<any> = new EventEmitter();
    @Output() loadedData: EventEmitter<any> = new EventEmitter();

    constructor(
        public el: ElementRef,
        public cdr: ChangeDetectorRef,
        @Inject(DOCUMENT) public document: any,
        public render: Renderer2,
        public comboService: ComboService,
        public injector: Injector
    ) {
        super(el, cdr, document, render, comboService, injector);
        this.comboService.displayType = 'TreeList';
    }

    onSelect(value: any) {
        const data = value.node.data;

        console.log(this.comboService.selections);
        // tslint:disable-next-line:triple-equals
        this.comboService.selections = this.comboService.selections.filter(v => v[this.idField] != data[this.idField]);
        this.comboService.selectItem(data);
        console.log(value);
    }
    onUnSelected(value: any) {
        const data = value.node.data;
        this.comboService.unSelectItem(data);
        console.log(value);
    }
    onChecked(value: any) {
        const data = value.node.data;

        console.log(this.comboService.selections);
        // tslint:disable-next-line:triple-equals
        this.comboService.selections = this.comboService.selections.filter(v => v[this.idField] != data[this.idField]);
        this.comboService.selectItem(data);
        console.log(value);
    }
    onUnChecked(value: any) {
        const data = value.node.data;
        this.comboService.unSelectItem(data);
        console.log(value);
    }

    ngOnInit() {
        if (!this.valueField && this.idField) {
            this.valueField = this.idField;
        }
        // this.comboService.isOpen$.subscribe(val => {
        //     this.isOpen = val;
        // });
        // this.comboService.selections$.subscribe((data) => {
        //     this.displayText = this.comboService.getValue(this.textField);
        //     this.selectedValues = this.comboService.getValue(this.valueField);
        //     console.log(data);
        //     this.onChange(this.displayText);
        // });
        // this.comboService.loadData(this.data, this.selectedValues);
    }
}