import { LocalizationSource as localizeSource } from "./Localization";
import { LocalizationManager } from "./Localization";
import { Dialog } from "@syncfusion/ej2-popups";
import { Sidebar } from "@syncfusion/ej2-navigations";
import { enableRipple } from '@syncfusion/ej2-base';


/**
 * Stellt UI-Funktionen zur Verfügung
 */
export class Ui {

    private static _instance: Ui;
    private _localizer: LocalizationManager;
    private _modalDialog: Dialog;
    private _modalModule: Dialog;
    private _rightSideBar: Sidebar;

    private _rightSideBarId: string;
    private _modalModuleId:string;

    /**
    * Callback-Funktion für den modalen Dialog
    */
    private _modalDialogCallback: any = undefined;

    /**
    * Callback-Funktion für den modalen Dialog wenn cancel
    */
    private _modalDialogCancelCallback: any = undefined;

    /**
     * Erstellt eine Instanz
     */
    private constructor() {
        enableRipple(true);
        this._modalDialogCallback = undefined;
        this._modalDialogCancelCallback = undefined;
        this._localizer = LocalizationManager.getInstance();

        this._modalDialog = new Dialog({
            isModal: true,
            visible: false,
            target: "body",
        });
        $("#modalDialog").css("display", "");

        this._modalModule = new Dialog({
            isModal: true,
            visible: false,
            target: "body",
        });
        $("#modalModule").css("display", "");

        this._rightSideBar = new Sidebar({
            showBackdrop: true,
            isOpen: false,
            enableDock: false,
            type: "Over",
            width: "75%",
            position: "Right",
            animate: true,
            closeOnDocumentClick: false,
            enableGestures: false
        });

        this._rightSideBarId = "";
        this._modalModuleId = "";
        this.init();
    }

    /**
     * Instanz
     */
    static getInstance(): Ui {
        if (!Ui._instance) {
            Ui._instance = new Ui();
        }
        return Ui._instance;
    }

    /**
     * Initialisierung des Moduls
     */
    private init(): void {
        var self = this;

        $("#modalDialogOk").on("click",
            (e) => {
                self._modalDialog.hide();
                if (self._modalDialogCallback !== undefined && self._modalDialogCallback !== null) {
                    self._modalDialogCallback();
                }
                e.preventDefault();
            });

        $("#modalDialogCancel").on("click",
            () => {
                self._modalDialog.hide();
                if (self._modalDialogCancelCallback !== undefined && self._modalDialogCancelCallback !== null) {
                    self._modalDialogCancelCallback();
                }
                else
                    return false;
            });

        self._modalDialog.appendTo("#modalDialog");
        self._modalModule.appendTo("#modalModule");
        self._rightSideBar.appendTo("#sideBarRight");
        //$("#modalDialog").css("display", "none");

        //BlockUi anpassen
        $.blockUI.defaults.overlayCSS.backgroundColor = "rgba(72, 73, 77, 0.95)";
        $.blockUI.defaults.css.border = "0;";
        $.blockUI.defaults.css.backgroundColor = "transparent;";
        $.blockUI.defaults.message = "<div class=\"spinner\"><div class=\"double-bounce1\"></div><div class=\"double-bounce2\"></div></div>";
        $.blockUI.defaults.baseZ = 1000000;
        //Funktion die den Klick-Handler für alle Elemente die die Klasse "blockMainUi" haben registriert
        $(".blockMainUi").on("click", () => {
            self.blockMainUi();
        });

        if (typeof toastr !== "undefined") {
            //Prüfen ob toastr überhaupt geladen wurde
            toastr.options.positionClass = "toast-top-center";
            toastr.options.timeOut = 1500;
        }
    }

    //#region Messages - Anzeige

    /**
    * Zeigt eine Nachricht für den Benutzer an
    * @param {string} title: Titel der Nachricht
    * @param {string} message: Eigentliche Nachricht
    * @param {number} type: Typ der Nachricht. 0: Info, 1: Warning, 2: Error, 3: Erfolg. Info ist default
    * @param {number} timeout: Wie lange soll die Nachricht angezeigt werden (in Millisekunden)
    * @param {boolean} closeButton: Soll ein Schließen-Button angezeigt werden? true für ja, false sonst
    */
    showMessage(title: string, message: string, type: number, timeout: number, closeButton: boolean): void {

        switch (type) {
            case 0:
                toastr.info(message, title, { closeButton: closeButton, timeOut: timeout });
                break;
            case 1:
                toastr.warning(message, title, { closeButton: closeButton, timeOut: timeout });
                break;
            case 2:
                toastr.error(message, title, { closeButton: closeButton, timeOut: timeout });
                break;
            case 3:
                toastr.success(message, title, { closeButton: closeButton, timeOut: timeout });
                break;
            default:
                toastr.info(message, title, { closeButton: closeButton, timeOut: timeout });
        }
    }

    /**
     * Zeigt eine Erfolgs-Nachricht für den Benutzer an
     * @param message: Eigentliche Nachricht
     * @param title: Titel (Optional)
     * @param timeout: Timout in Millisekunden (optional)
     * @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
     */
    showSuccessMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
        var self = this;
        self.showMessage(title, message, 3, timeout, showCloseButton);
    }

    /**
     * Zeigt eine Fehler-Nachricht für den Benutzer an
     * @param message: Eigentliche Nachricht
     * @param title: Titel (Optional)
     * @param timeout: Timout in Millisekunden (optional)
     * @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
     */
    showErrorMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
        var self = this;
        self.showMessage(title, message, 2, timeout, showCloseButton);
    }

    /**
     * Zeigt eine Warnungs-Nachricht für den Benutzer an
     * @param message: Eigentliche Nachricht
     * @param title: Titel (Optional)
     * @param timeout: Timout in Millisekunden (optional)
     * @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
     */
    showWarningMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
        var self = this;
        self.showMessage(title, message, 1, timeout, showCloseButton);
    }

    /**
     * Zeigt eine Info-Nachricht für den Benutzer an
     * @param message: Eigentliche Nachricht
     * @param title: Titel (Optional)
     * @param timeout: Timout in Millisekunden (optional)
     * @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
     */
    showInfoMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
        var self = this;
        self.showMessage(title, message, 0, timeout, showCloseButton);
    }

    //#endregion

    //#region Blocks

    /**
     * UI Loading Overlay anzeigen
     */
    blockMainUi(timeout: number = 25000): void {
        var self = this;
        $(".tmloading").show();
        setTimeout(() => {
            self.unblockMainUi();
        }, timeout);
    }

    /**
     * UI Loading Overlay ausblenden
     */
    unblockMainUi(): void {
        $(".tmloading").fadeOut();
    }

    /**
     * Blockieren eines HtmlElements
     * @param selector
     */
    blockUi(selector: string): void {
        $(selector).block();
    }

    /**
     * Blockierung eines HtmlElements aufheben
     * @param selector
     */
    unblockUi(selector: string): void {
        $(selector).unblock();
    }

    //#endregion

    //#region Modaler Dialog mit Yes/No

    /**
     *Anzeigen eines Modalen Dialoges
     * showYesNo bestimmt ob "Ja/Nein" oder "Ok/Cancel" angezeigt wird
     * @param text: Anzuzeigender Text?
     * @param showYesNo: als Ja/Nein anzeigen?
     * @param callback: optionaler Callback
     */
    showModal(text: string, showYesNo: boolean, callback?: any, callbackCancel?: any) {
        var self = this;
        $("#modalDialogText").text(text);

        if (showYesNo) {
            $("#modalDialogOk").text(self._localizer.get("Button_Yes", localizeSource.All));
            $("#modalDialogCancel").text(self._localizer.get("Button_No", localizeSource.All));
        }
        else {
            $("#modalDialogOk").text(self._localizer.get("Button_Ok", localizeSource.All));
            $("#modalDialogCancel").text(self._localizer.get("Button_Cancel", localizeSource.All));
        }

        this._modalDialogCallback = callback;
        this._modalDialogCancelCallback = callbackCancel;
        self._modalDialog.show(false);
    }

    //#endregion

    //#region Modul-Anzeige

    /**
     * Anzeigen eines Moduls.
     * Das System entscheidet ob in einem Sidebar oder einem Dialog.
     * Wenn möglich wird zuerst der Sidebar verwendet, ansonsten ein Dialo.
     * Derzeit wenn mehr als 2 Module angezeigt werden sollen, passiert nichts
     * @param id Eindeutige Id des Moduls
     * @param content Inhalt des Moduls
     */
    showModule(id:string, content: string, width:any = null) {
        var self = this;

        if (self._rightSideBarId === "") {
            self._rightSideBarId = id;
            $("#sideBarRight").html(content);
            if (width != null)
                self._rightSideBar.width = width;
            else
                self._rightSideBar.width = "75%";
            $("#sideBarRight").css("visibility", "visible");
            self._rightSideBar.show();
            return;
        }
        else if (self._modalModuleId === "") {
            self._modalModuleId = id;
            $("#modalModuleContent").html(content);
            if (width != null)
                self._modalModule.width = width;
            else
                self._modalModule.width = "75%";
            self._modalModule.show();
            return;
        }
        console.log(`showModule --> ${id} you need more view components!`);
    }

    /**
     * Ausblenden des modalen Dialogs mit einem Modul als Inhalt
     * @param id Eindeutige Id des Moduls
     */
    hideModule(id:string) {
        var self = this;

        if (self._rightSideBarId === id) {
            self._rightSideBarId = "";
            self._rightSideBar.hide();
            $("#sideBarRight").html("");
            return;
        }
        else if (self._modalModuleId === id) {
            self._modalModuleId = "";
            self._modalModule.hide();
            $("#modalModuleContent").html("");
            return;
        } else {
            console.log(`hideModule --> Module ${id} not found!`);
        }
    }

    //#endregion

    //#region PageTitle

    /**
     * Anzeigen eines zusätzlichen Page-Titles
     * Wird angezeigt wenn die Komponenten nicht in einem Sidebar oder Dialog angezeigt wird.
     * Wird verwendet für z.B. Bereich | Bearbeiten xxxx
     * @param componentId
     * @param pageTitleId
     */
    pageTitleAdd(componentId:string, pageTitleId): void {
        if ($(componentId).length > 0 && $(pageTitleId).length > 0) {
            if (!$(componentId).isInsideSidebar() && !$(componentId).isInsideModuleDialog()) {
                var id = `#ptaid_${componentId.replace("#", "")}`;
                if ($(id).length === 0) {
                    var span = `<span id="ptaid_${componentId.replace("#", "")}"> | ${$(pageTitleId).text()}</span>`;
                    $("#pageTitleAdd").append(span);
                }
                //$("#pageTitleAdd").text(`| ${$(pageTitleId).text()}`);
            }
        }
    }

    /**
     * Entfernen des zusätzlichen Page-Titles.
     * Wird entfernt wenn die Komponenten nicht in einem Sidebar oder Dialog angezeigt wird.
     * @param componentId
     */
    pageTitleClear(componentId: string) {
        if ($(componentId).length > 0) {
            if (!$(componentId).isInsideSidebar() && !$(componentId).isInsideModuleDialog()) {
                $(`#ptaid_${componentId.replace("#", "")}`).remove();
            }
        }
    }

    //#endregion
}