import { ChangeDetectorRef } from '@angular/core';
/*
* @Author: 疯狂秀才(lucas huang)
* @Date: 2018-11-23 08:33:37
 * @LastEditors: 疯狂秀才(Lucas Huang)
 * @LastEditTime: 2019-10-17 16:38:53
* @Company: Inspur
* @Version: v0.0.1
*/

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, TemplateRef,
    ComponentRef, Injector, ComponentFactoryResolver, ElementRef, forwardRef, HostListener, HostBinding } from '@angular/core';
import { cloneDeep } from 'lodash-es';
import { LookupComponent } from '@farris/ui-lookup';
import { SortCondition, SortType } from '@farris/ui-common/types';
import { BsModalRef, BsModalService } from '@farris/ui-modal';
import { SortEditorComponent } from './sort-editor.component';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { LocaleService } from '@farris/ui-locale';
import { CommonUtils } from '@farris/ui-common';
export interface SORT_FIELD_EDITOR {
    type: 'select' | 'combo-tree' | 'lookup';
    options?: any;
}
export const SORTER_LOOKUPGRID_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SorterComponent),
    multi: true
};

@Component({
    selector: 'sorter',
    template: `
    <div class="input-group">
        <input class="form-control" [value]="text" #txtbox
            [readonly]="!editable || readonly"
            [class.f-state-disabled] = "disabled"
            [class.f-state-readonly] = "readonly"
            [class.f-state-editable] = "!editable"
            [disabled]="disabled"/>
        <div class="input-group-append" *ngIf="!readonly && !disabled">
            <span *ngIf="showClearButton && enableClear" class="f-select input-group-text lookup-clear" (click)="clear()">
                <i class="f-icon modal_close"></i>
            </span>
            <span class="f-select input-group-text"  (click)="showDialog()">
                <i class="f-icon f-icon-lookup"></i>
            </span>
        </div>
    </div>

    <ng-template #defaultButtonRef>
        <button class="btn btn-outline-secondary" (click)="cancel()"> {{ 'sortEditor.cancel'| locale }} </button>&nbsp;
        <button class="btn btn-primary" (click)="save()"> {{ 'sortEditor.ok'| locale }} </button>
    </ng-template>
    `,
    providers: [
        SORTER_LOOKUPGRID_VALUE_ACCESSOR
    ],
    styles: [
        `
        .lookup-clear { cursor: pointer; background: #fff!important;}
        .lookup-clear:hover { background: #e9ecef!important;}
        `
    ]
})

export class SorterComponent extends LookupComponent implements OnInit {

    @HostBinding('class') hostCls = 'f-cmp-inputgroup';

    text = '';
    conditions: SortCondition[] = [];
    originalData: SortCondition[] = [];
    @Input() columns: {label: string, value: string}[] = [];
    @Input() fieldEditor: SORT_FIELD_EDITOR = { type: 'select', options: {}};
    @Input() returnType: 'object' | 'string' = 'object';
    @Output() openDialog = new EventEmitter();
    @ViewChild('defaultButtonRef') btnRef: TemplateRef<any>;
    @ViewChild('txtbox') textbox: ElementRef<any>;
    @Input() enableClear = true;
    dlgRef: BsModalRef;
    sortEditorRef: ComponentRef<SortEditorComponent>;
    cd: ChangeDetectorRef = null;

    showClearButton = false;
    localeService: LocaleService;
    commonUtils: CommonUtils = null;
    constructor(
        injector: Injector, private cfr: ComponentFactoryResolver,
        private modalService: BsModalService, public el: ElementRef) {
        super(injector, el);
        this.localeService = this.injector.get(LocaleService);
        this.cd = this.injector.get(ChangeDetectorRef, null);
        this.commonUtils = this.injector.get(CommonUtils, null) || new CommonUtils();
    }

    ngOnInit() { }

    @HostListener('mouseover')
    onmouseover() {
        this.showClearButton = true;
    }

    @HostListener('mouseleave')
    onmouseleave() {
        this.showClearButton = false;
    }

    showDialog() {
        if (!this.disabled) {

            if (this.fieldEditor && this.fieldEditor.type === 'combo-tree') {
                this.fieldEditor.options = this.fieldEditor.options || {};
                if (this.fieldEditor.options.autoWidth === undefined) {
                    this.fieldEditor.options.autoWidth = true;
                }

                if (!this.fieldEditor.options.columns) {
                    this.fieldEditor.options.columns = [ { field: 'label', title: 'label', width: 100 } ];
                }

                if (!this.fieldEditor.options.textField) {
                    this.fieldEditor.options.textField = 'label';
                }

                if (!this.fieldEditor.options.idField) {
                    this.fieldEditor.options.idField = 'value';
                }
            }


            const sortEditorFactory = this.cfr.resolveComponentFactory(SortEditorComponent);
            this.sortEditorRef = sortEditorFactory.create(this.injector);
            this.sortEditorRef.instance.columns = this.columns;
            this.sortEditorRef.instance.conditions = this.conditions;
            this.originalData = cloneDeep(this.conditions);
            this.dlgRef = this.modalService.show(this.sortEditorRef, {
                width: 500, height: 400,
                title: this.localeService.getValue('sortEditor.title'),
                enableScroll: false,
                minHeight: 298, minWidth: 498, iconCls: 'k-icon k-i-sort-asc',
                buttons: this.btnRef,
                showMaxButton: false, buttonAlign: 'right',
                dialogFooterStyles: { background: '#F4F6F9' },
                initialState: {
                    fieldEditor: this.fieldEditor
                }
            });

            this.sortEditorRef.instance.height = this.dlgRef.dialog.instance.getContainerSize().height;

            this.dlgRef.dialog.instance.resized.subscribe( size => {
                this.sortEditorRef.instance.height = size.containerHeight;
            });

            this.sortEditorRef.instance.sortsChanged.subscribe( (e: {action: string, data: any[]}) => {
                this.conditions = e.data;
            });

            this.sortEditorRef.changeDetectorRef.detectChanges();

            this.dlgRef.dialog.changeDetectorRef.reattach();
            this.openDialog.emit();
        }
    }

    writeValue(val: any) {
        if (val) {
            if (typeof val === 'string') {
                val = JSON.parse(val);
            }

            this.conditions = val || [];
            this.text = this.commonUtils.buildSortString(val);
        }
    }

    save() {
        if (this.conditions.length) {
            this.conditions = this.conditions.filter(c => c.sortField);
            this.text = this.commonUtils.buildSortString(this.conditions);
        } else {
            this.text = '';
        }

        this.closeDialog();

        if (this.cd) {
            this.cd.detectChanges();
        }
    }

    cancel() {
        this.conditions = this.originalData;
        this.closeDialog();
    }

    closeDialog() {
        this.updateModel();
        this.sortEditorRef = null;
        this.dlgRef.close();
    }

    clear() {
        this.text = '';
        this.conditions = [];
        this.updateModel();
    }



    private updateModel() {
        let v: any = this.conditions;
        if (this.returnType === 'string') {
            v = JSON.stringify(this.conditions);
        }

        this.onModelChange(v);
        this.onModelTouched(v);
    }

}