import { Injectable } from '@angular/core';
import { DialogService, DialogSettings, DialogRef } from '@progress/kendo-angular-dialog';

declare let $: any;

/**
 * Wrapper of Kendo Angular DialogService to open dialogs where user cannot climb down from
 * the modal window by pushing TAB.
 *
 * After the dialog closes, the same element will get the focus that had before opening the
 * dialog window.
 */
@Injectable()
export class MyDialogService {
    private eventFuncStack: any[] = [];

    /**
     * Helper function to select the button that should be focused after the dialog is opened
     * based on the text that is written onto it
     *
    /*
    static findButtonByText(dialogObj: any, text: string): any | undefined {
        const buttons = dialogObj.find('button');
        for (const button of buttons) {
            const buttonText: string = $(button).text();
            if (buttonText && buttonText.trim() === text) {
                return button;
            }
        }
        return undefined;
    }

    constructor(private dialogService: DialogService) {}

    /**
     * Same as the original DialogService.open() function with the difference that the user can specify
     * with the second parameter which element on the opened dialog should be focused.
     */
    open(options: DialogSettings, focusedElementAfterOpen?: (dialogJQueryObj: any) => any): DialogRef {
        const activeElementBeforeOpen = document.activeElement;

        const dialog = this.dialogService.open(options);
        dialog.dialog.changeDetectorRef.detectChanges();

        const dialogObj = $(dialog.dialog.location.nativeElement).find('.k-window');

        let focusedElement: any | undefined;

        if (focusedElementAfterOpen) {
            focusedElement = focusedElementAfterOpen(dialogObj);
        }

        if (!focusedElement) {
            const focusableElements = dialogObj.focusable();
            if (focusableElements.length > 0) {
                focusedElement = focusableElements[0];
            }
        }

        if (focusedElement) {
            $(focusedElement).focus();
        }

        const eventFuncObj = this.addEvent(dialogObj);
        this.eventFuncStack.push(eventFuncObj);

        dialog.result.subscribe(result => {
            $(document).off('keydown.kendoWindow', undefined, eventFuncObj);
            this.eventFuncStack.splice(this.eventFuncStack.indexOf(eventFuncObj), 1);
            if (activeElementBeforeOpen) {
                $(activeElementBeforeOpen).focus();
            }
            if (this.eventFuncStack.length > 0) {
                $(document).on('keydown.kendoWindow', undefined, this.eventFuncStack[this.eventFuncStack.length - 1]);
            }
        });
        return dialog;
    }

    private addEvent(dialogObj: any) {
        const eventFuncObj = (e: any) => this.eventFunction(e, dialogObj);
        if (this.eventFuncStack.length > 0) {
            $(document).off('keydown.kendoWindow', undefined, this.eventFuncStack[this.eventFuncStack.length - 1]);
        }
        $(document).on('keydown.kendoWindow', undefined, eventFuncObj);
        return eventFuncObj;
    }

    private eventFunction(e: any, dialogObj: any) {
        if (e.keyCode === 9 || e.keyCode === 37 || e.keyCode === 39) {
            const tabableElements = dialogObj.focusable();
            const focusedElement = $(document.activeElement);

            const index = tabableElements.index(focusedElement);

            /*if (e.keyCode === 37) {
                // left key,  set new focused element index - 1
                if (index > 0) {
                    tabableElements[index - 1].focus();
                } else {
                    tabableElements.first().focus();
                }
            } else if (e.keyCode === 39) {
                // TODO set new focused element index + 1
                if (index !== -1 && index !== tabableElements.length - 1) {
                    tabableElements[index + 1].focus();
                } else {
                    tabableElements.first().focus();
                }
            } else*/
            if (e.keyCode === 9) {
                // original tab override
                if (!e.shiftKey) {
                    if (index === -1 || index === tabableElements.length - 1) {
                        e.preventDefault();
                        tabableElements.first().focus();
                    }
                } else {
                    if (index === -1 || index === 0) {
                        e.preventDefault();
                        tabableElements.last().focus();
                    }
                }
            }
        }
    }
}