import { InputGroupComponent } from '@farris/ui-input-group';
import { EnumEditorService, EnumOutType } from './enum-editor.service';
import { Component, OnInit, Injector, ElementRef, Input, EventEmitter, Output, forwardRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { LookupComponent } from '@farris/ui-lookup';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

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


@Component({
    selector: 'enum-editor-input',
    template: `
    <input-group #ig style="width: 100%"
        [groupText]="groupIcon"
        (clear)="onClear($event)"
        (clickHandle)="showDialog()"
        [readonly] = "readonly"
        [editable] = "editable"
        [enableClear] = "enableClear"
        [(value)]="value">
    </input-group>
    `,
    providers: [
        ENUM_EDITOR_VALUE_ACCESSOR,
        EnumEditorService
    ]
})
export class EnumEditorInputComponent extends LookupComponent implements OnInit {
    @Input() value: any;
    @Input() textField = 'name';
    @Input() valueField = 'value';
    @Input() outType: EnumOutType = EnumOutType.array;
    @Input() enableClear = true;

    @Output() valueChange = new EventEmitter();

    @ViewChild('ig') inputGroupRef: InputGroupComponent;

    groupIcon = '<i class="f-icon f-icon-lookup"></i>';
    cd: ChangeDetectorRef = null;

    constructor(public injector: Injector, private ees: EnumEditorService, public el: ElementRef) {
        super(injector, el);

        this.ees.dataChanged.subscribe(str => {
            this.updateData(str);
        });

        this.cd = this.injector.get(ChangeDetectorRef, null);
    }

    private updateData(str: any) {
        this.value = str;
        if (this.cd) {
            this.cd.detectChanges();
        }

        this.valueChange.emit(str);
        this.onModelChange(str);
        this.onModelTouched(str);
    }

    ngOnInit(): void { }

    showDialog() {
        const enumData = this.convertValue2JSON();
        this.ees.showDialog(enumData, {
            textField: this.textField,
            valueField: this.valueField,
            outType: this.outType
        });
    }

    onClear($event) {
        this.updateData('');
    }

    writeValue(val: any) {
        if (val && typeof val === 'object') {
            this.value = JSON.stringify(val);
        } else {
            this.value = val || '';
        }
    }

    private convertValue2JSON() {
        return this.ees.toJSON(this.value);
    }
}