import { DialogService } from "@easyquery/ui"
 
declare var $: any;

export class JQueryDialogService implements DialogService {


    private confirmDialog: any;
    private promptDialog: any;

    constructor() {
        $('body').append($(`<div id="eqv-dialog-confirm" style="display: none"><p id="eqv-dialog-confirm-content"></p></div>`));

        $('body').append($(`<div id="eqv-dialog-form" style="display: none">
                        <label for="name" id="eqv-dialog-form-content"></label>
                        <input type="text" name="name" id="eqv-dialog-form-input" class="text ui-widget-content ui-corner-all" />
                </div>`));


        this.confirmDialog = $('#eqv-dialog-confirm');
        this.promptDialog = $('#eqv-dialog-form');
        
        this.confirmDialog.dialog({
            dialogClass: "eqv-dialog eq-js-dialog",
            closeOnEscape: false,
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            autoOpen: false
        });

        this.promptDialog.dialog({
            dialogClass: "eqv-dialog eq-js-dialog",
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            autoOpen: false
        });

    }

    public openConfirm(title?: string, content?: string): Promise<boolean>
    public openConfirm(title?: string, content?: string, callback?: (result: boolean) => void): void
    public openConfirm(title?: string, content?: string, callback?: (result: boolean) => void): Promise<boolean> | void {
        this.confirmDialog.dialog('option', 'title', title);
        $('#eqv-dialog-confirm-content').text(content);

        if (callback) {
            this.setConfirmButtons(callback);
            this.confirmDialog.dialog('open');
            return;
        }

        return new Promise<boolean>((resolve) => {
            this.setConfirmButtons(resolve);
            this.confirmDialog.dialog('open');
        });
    }


    private setConfirmButtons (callback){
        const buttons = [

            {
                text: "OK",
                click: function () {
                    callback(true);
                    $(this).dialog("close");
                }
            },
            {

                text: "Cancel",
                click: function () {
                    callback(false);
                    $(this).dialog("close");
                }
            }

        ];

        this.confirmDialog.dialog('option', 'buttons', buttons);
    }

    public openPrompt(title?: string, content?: string, defValue?: string): Promise<string>
    public openPrompt(title?: string, content?: string, defValue?: string, callback?: (result: string) => void): void
    public openPrompt(title?: string, content?: string, defValue?: string, callback?: (result: string) => void): Promise<string> | void {
        this.promptDialog.dialog('option', 'title', title);
        $('#eqv-dialog-form-content').text(content);
        $('#eqv-dialog-form-input').val(defValue || "");

        if (callback) {
            this.setPromptButtons(callback);
            this.promptDialog.dialog('open');
            return;
        }

        return new Promise<string>((resolve) => {
            this.setPromptButtons(resolve);
            this.promptDialog.dialog('open');
        });
    }

    private setPromptButtons(callback) {
        const buttons = [

            {
                text: "OK",
                click: function () {
                    const result = $('#eqv-dialog-form-input').val();
                    if (result && result.replace(/\s/g, '').length > 0) {
                        callback(result);
                        $(this).dialog("close");
                    }
                }
            },

            {

                text: "Cancel",
                click: function () {
                    callback("");
                    $(this).dialog("close");
                }
            }

        ];

        this.promptDialog.dialog('option', 'buttons', buttons);
    }
}