import { Component, OnInit, HostBinding, Input, Output, EventEmitter, Injector } from '@angular/core';
import { MessagerService } from '@farris/ui-messager';
import { cloneDeep } from 'lodash-es';
import { SortCondition, SortTypes, SortType } from '@farris/ui-common/types';
import { SafeStyle, DomSanitizer } from '@angular/platform-browser';
import { LocaleService } from '@farris/ui-locale';

@Component({
    selector: 'sort-editor',
    templateUrl: 'sort-editor.component.html',
    styles: [
        `
        .sort-col-header thead th { padding: 0; line-height: 35px;}
        .filter-select { width:100%; padding-left: 0; padding-right: 0; }
        .selected { background: #c2e4ff; }
        `
    ]
})

export class SortEditorComponent implements OnInit {

    sortTypes = SortTypes;

    columnSizeData = [30, 120, 60];

    @HostBinding('class') cls = 'f-sort-editor f-utils-flex-column f-utils-absolute-all';

    @Input() fieldEditor = { type: 'select', options: null};
    @Input() conditions: SortCondition[] = [];
    @Input() columns: {label: string, value: string}[] = [];
    @Input() height: number;

    @Output() sortsChanged = new EventEmitter();

    private newCondition = {
        sortField: '',
        sortType: SortType.Asc,
    };

    currentCondition: { index: number, condition: SortCondition } = null;
    localeService: LocaleService;
    constructor(private messagerService: MessagerService, private sanitizer: DomSanitizer, private injector: Injector) {
        this.localeService = this.injector.get(LocaleService);

        this.sortTypes = [
            { label: this.localeService.getValue('sortEditor.asc'), value: SortType.Asc },
            { label: this.localeService.getValue('sortEditor.desc'), value: SortType.Desc }
        ];
    }

    ngOnInit() { }

    selected($event) {
        this.currentCondition = $event;
    }

    isSelected($event: number) {
        if (this.currentCondition) {
            return this.currentCondition.index === $event;
        }
        return false;
    }

    insertCondition(index: number) {
        const _newCondition = Object.assign({}, this.newCondition);
        if (index  === 0) {
            this.conditions = [_newCondition, ...this.conditions];
        } else {
            const _data = cloneDeep(this.conditions);
            _data.splice(index, 0, _newCondition);
            this.conditions = [..._data];
        }
        this.changeConditionList('insert');
    }

    removeCondition(index: number) {
        this.conditions.splice(index, 1);
        // this.conditions = [...this.conditions];
        this.changeConditionList('remove');

        if (this.currentCondition) {
            if (index === this.currentCondition.index) {
                this.currentCondition = null;
            }
        }
    }

    onAdd() {
        this.conditions = [...this.conditions, Object.assign({}, this.newCondition)];
        this.changeConditionList('add');
    }

    onClear() {
        this.messagerService.question('确认要清空当前所有排序字段吗？', () => {
            this.conditions = [];
            this.changeConditionList('clear');
        });
    }

    onMoveTop() {
        if (this.currentCondition) {
            this.conditions.unshift(this.currentCondition.condition);
            this.conditions.splice(this.currentCondition.index + 1, 1);

            this.currentCondition.index = 0;
            this.changeConditionList('moveTop');
        }
    }

    onMovePrev() {
        if (this.currentCondition) {
            const index = this.currentCondition.index;
            const tempArr = this.conditions.splice(index, 1);
            this.conditions.splice(index - 1, 0, ...tempArr);

            this.currentCondition.index = index - 1;
            this.changeConditionList('movePrev');
        }
    }
    onMoveNext() {
        if (this.currentCondition) {
            const index = this.currentCondition.index;
            const tempArr = this.conditions.splice(index, 1);
            this.conditions.splice(index + 1, 0, ...tempArr);

            this.currentCondition.index = index + 1;
            this.changeConditionList('moveNext');
        }
    }
    onMoveBottom() {
        if (this.currentCondition) {
            this.conditions.push(this.currentCondition.condition);
            this.conditions.splice(this.currentCondition.index, 1);
            this.currentCondition.index = this.conditions.length - 1;
            this.changeConditionList('moveBottom');
        }
    }

    canUse() {
        if (this.currentCondition) {
            return this.conditions.length > 1;
        }

        return false;
    }

    canMoveUp() {
        if (this.canUse()) {
            return this.currentCondition.index > 0;
        }

        return false;
    }

    canMoveDown() {
        if (this.canUse()) {
            return this.currentCondition.index < this.conditions.length - 1;
        }

        return false;
    }

    private changeConditionList(action: 'add'|'moveTop'|'moveBottom'|'movePrev'|'moveNext'|'insert'|'clear'|string) {
        this.sortsChanged.emit({ action, data: this.conditions});
    }
}