import { ElementRef, Injector, OnInit, Renderer2, AfterViewInit, Host, ComponentRef, Self, Optional } from '@angular/core';
import { EditorComponent } from '@farris/ui-editor';

/**
 * form 表单中输入组件的tab-index
 * Date: 2021-03-11
 * Creator: Lucas GOGO
 */
import { Directive, Input } from '@angular/core';

@Directive({
    selector: '[tab-index]',
})
export class TabIndexDirective implements OnInit, AfterViewInit {
    @Input('tab-index') tabIndex: number | string;

    private input = 'INPUT';
    private textarea = 'TEXTAREA';
    private inputGroup = 'INPUT-GROUP';
    private lookup = 'FARRIS-LOOKUP-GRID';
    private comboLookup = 'FARRIS-COMBO-LOOKUP';
    private comboList = 'FARRIS-COMBO-LIST';
    private datepicker = 'FARRIS-DATEPICKER';
    private timepicker = 'FARRIS-TIME-PICKER';
    private numberSpinner = 'FARRIS-NUMBER-SPINNER';
    private checkGroup = 'FARRIS-CHECKBOXGROUP';
    private radioGroup = 'FARRIS-RADIOGROUP';
    private switchCase = 'FARRIS-SWITCH';
    private htmlEditor = 'FARRIS-EDITOR';
    private colorPicker = 'COLOR-PICKER';
    private langText = 'LANGUAGE-TEXTBOX';


    private inputs = [this.input, this.textarea];
    private farrisInputs = [ this.inputGroup, this.lookup, this.comboList, this.colorPicker, this.langText,
                            this.comboLookup, this.datepicker, this.timepicker, this.numberSpinner ];

    constructor(private elRef: ElementRef, private inject: Injector, private render: Renderer2,
                @Optional() @Self() private editorRef: EditorComponent) {}

    ngOnInit() {
    }

    ngAfterViewInit() {
        setTimeout(() => {
            this.updateTabIndex();
        });
    }

    private updateTabIndex() {
        const el = this.elRef.nativeElement;
        if (this.tabIndex === '' || this.tabIndex === undefined || this.tabIndex === null ) {
            this.tabIndex = el.tabIndex !== undefined ? el.tabIndex : -1;
        }
        const tagName = el.tagName.toUpperCase();

        let inputEle = null;

        if (this.inputs.indexOf(tagName) > -1) {
            inputEle = el;
        } else {
            if (this.farrisInputs.indexOf(tagName) > -1) {
                inputEle = el.querySelector('input');
            }

            if (tagName === this.htmlEditor) {
                if (this.editorRef) {
                    this.editorRef.onInit.subscribe( () => {
                        inputEle = el.querySelector('iframe');
                        el.removeAttribute('tabindex');
                        inputEle.tabIndex = this.tabIndex;
                    });
                }
            }

        }

        if (inputEle) {
            el.removeAttribute('tabindex');
            inputEle.tabIndex = this.tabIndex;
        }
    }

}