import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
    NbpBaseComponent,
    NbpStyle,
    NbpDataSource
} from '@isp/xdce-widget';

@Component({
    selector: 'nbp-fid-combo',
    templateUrl: './nbp-fid-combo.component.html',
    styleUrls: ['./nbp-fid-combo.component.scss']
})
export class NbpFidComboComponent extends NbpBaseComponent {
    constructor(){
        super()
    }

    @Input() nbpViewField : string = null;
    @Input() nbpKeyField : string = null;

    _emptyLabel: string = '';
    _emptyValue: string = null;
    _options: Array<any> = [];

    private _model: any;
    @Input()
    set ngModel(value:  any) {
        this._model = value;
        if (this._nbpShowEmptyValue && this._model !== null && !this.nbpViewField) {
            this._emptyValue = this._model;
            this._emptyLabel = this._model;
        }
    }

    @Output() ngModelChange = new EventEmitter<any>();
    get ngModel(): any {
        return this._model;
    }

    private _nbpStyle:  NbpStyle = NbpStyle.DEFAULT;
    @Input()
    set nbpStyle(value:  NbpStyle) {
        this._nbpStyle = value;
    }
    get nbpStyle():  NbpStyle {
        return this._nbpStyle;
    }

    private _nbpShowEmptyValue: boolean = true;
    @Input()
    set nbpShowEmptyValue(value:  boolean) {
        this._nbpShowEmptyValue = value;
    }
    get nbpShowEmptyValue():  boolean {
        return this._nbpShowEmptyValue;
    }

    private _disabled: boolean = false;
    @Input()
    set disabled(value:  boolean) {
        this._disabled = value;
    }
    get disabled():  boolean {
        return this._disabled;
    }


    private _nbpDataSource:  NbpDataSource<any> = new NbpDataSource<any>();
    @Input()
    set nbpDataSource(value:  NbpDataSource<any>) {
        this._nbpDataSource = value;
        this._readOptions();
    }
    get nbpDataSource():  NbpDataSource<any> {
        return this._nbpDataSource;
    }

    ngOnInit(): void {
        this._readOptions();
    }

    optStrValue(opt: any) {
        if (!opt)
            return "";
        if (typeof (opt) === "string")
            return opt;
        const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
        if (v === null || v === undefined)
            return "";
        return "" + v;
    }

    optValue(opt: any) {
        if (!opt)
            return null;
        if (typeof (opt) === "string")
            return opt;
        const v = this.nbpKeyField ? opt[this.nbpKeyField] : opt;
        if (v === null || v === undefined)
            return null;
        return v;
    }

    
    optLabel(opt: any) {
        if (!opt)
            return '';
        if (typeof (opt) === "string")
            return opt;

        const l = this.nbpViewField ? opt[this.nbpViewField] : opt;
        if (l === null || l === undefined)
            return '';
        return "" + l;
    }

    private _readOptions() {
        this._options = this.nbpDataSource ? this.nbpDataSource.arrayData : [];
        if (!this._options)
            this._options = [];
    }

    
    selected(op : any) {
        return this.optValue(op) === this.ngModel;
    }

    onChange(event: Event) {
        if (this._disabled)
            return;

        const selectElement = event.target as HTMLSelectElement;
        const val = selectElement.value || '';
        let sel = null;
        const arr = this._options;
        for (let a of arr) {
            const v = this.optValue(a);
            const sv = this.optStrValue(a);
            if (sv === val) {
                sel = v;
                break;
            }
        }

        this.ngModel = sel;
        this.ngModelChange.emit(this.ngModel);
    }
}