import { Container, observable } from 'aurelia-framework';
import { I18N } from 'aurelia-i18n';


export class NumberFilterHelper {
    @observable
    public fromNumber: number;
    @observable
    public toNumber: number;
    public type: string = 'equals';
    public displayEmptyFields: boolean = false;

    private i18n: I18N;

    constructor(private setModel: (model) => void) {
        this.i18n = Container.instance.get(I18N);
    }

    public isFilterActive(): boolean {
        return !this.fromNumberIsEmpty() || !this.toNumberIsEmpty() || this.displayEmptyFields;
    }

    public fromNumberChanged(newVal: number, oldVal: number) {
        if (newVal !== oldVal) {
            this.initModel();
        }
    }

    public toNumberChanged(newVal: number, oldVal: number) {
        if (newVal !== oldVal) {
            this.initModel();
        }
    }

    public typeCheckedChanged(checked: boolean) {
        let oldValue = this.type;
        this.type = (checked ? 'equals' : 'inRange');
        if (this.type !== oldValue) {
            this.initModel();
        }
    }

    private initModel() {
        if (this.fromNumberIsEmpty() && this.toNumberIsEmpty() && !this.displayEmptyFields) {
            this.setModel({ 'filterType': 'number', type: this.type, displayEmptyFields: this.displayEmptyFields });
        } else {
            this.setModel({ 'filterType': 'number', type: this.type, 'filter': this.fromNumber, 'filterTo': this.toNumber, displayEmptyFields: this.displayEmptyFields });
        }
    }


    public displayEmptyFieldsChanged() {
        let model = { filterType: 'number', type: this.type, displayEmptyFields: this.displayEmptyFields };
        if (!this.fromNumberIsEmpty() || !this.toNumberIsEmpty()) {
            Object.assign(model, { filter: this.fromNumber, filterTo: this.toNumber });
        }
        this.setModel(model);
    }

    public fromNumberIsEmpty(): boolean {
        return this.fromNumber == null || this.fromNumber.toString().trim() == '';
    }

    public toNumberIsEmpty(): boolean {
        return this.toNumber == null || this.toNumber.toString().trim() == '';
    }

    public resetFilter() {
        this.type ??= 'equals';
        this.fromNumber = this.toNumber = null;
        this.displayEmptyFields = false;
    }

    public setupContentGui(): string {
        return `<div class="floating-filter__body__number">
            <div class="ui-check__wrapper">
                <ui-checkbox checked.to-view="filterHelper.type == 'equals'" on-change.call="filterHelper.typeCheckedChanged(checked)">\${ 'grid.equals' | t }</ui-checkbox>
            </div>
            <template if.bind="filterHelper.type == 'equals'">
                <ui-field t="[label]common:grid.value">
                    <ui-input type="number" value.bind="filterHelper.fromNumber & debounce:500" clear></ui-input>
                </ui-field>
            </template>
            <template else>
                <ui-field t="[label]common:grid.from">
                    <ui-input type="number" value.bind="filterHelper.fromNumber & debounce:500" clear></ui-input>
                </ui-field>
                <ui-field t="[label]common:grid.to">
                    <ui-input type="number" value.bind="filterHelper.toNumber & debounce:500" clear></ui-input>
                </ui-field>
            </template>
            <div class="ui-check__wrapper" if.bind="showEmptyFieldsCheckbox">
                <ui-checkbox checked.bind="filterHelper.displayEmptyFields">\${ 'grid.displayEmptyFields' | t }</ui-checkbox>
            </div>
        </div>`;
    }

    public setupContentGuiSideFilter(): string {
        return `
            <ui-field label.bind="params.colDef.headerName"></ui-field>
            <div class="number-filter-input">
                <div class="col s12 m6 l6">
                    <ui-field t="[label]common:grid.from">
                    <ui-input type="number" value.bind="filterHelper.fromNumber & debounce:500"></ui-input>
                    </ui-field>
                </div>
                <div class="col s12 m6 l6">
                    <ui-field t="[label]common:grid.to">
                        <ui-input type="number" value.bind="filterHelper.toNumber & debounce:500"></ui-input>
                    </ui-field>
                </div>
            </div>`;
    }

    public getValue(): string {
        if (this.isFilterActive()) {
            if (this.type == 'equals') {
                return this.fromNumber.toString();
            }
            else if (this.toNumberIsEmpty()) {
                return '≥ ' + this.fromNumber.toString();
            }
            else if (this.fromNumberIsEmpty()) {
                return '≤ ' + this.toNumber.toString();
            }
            else {
                return this.fromNumber.toString() + ' ' + this.i18n.tr('grid.to', { ns: "common" }) + ' ' + this.toNumber.toString();
            }
        }
        return null;
    }

    public getModelAsString(): string {
        return this.getValue() ?? this.i18n.tr('grid.noFilter', { ns: "common" });
    }
}
