/**
 * Параметры настройки кнопок в футере модального окна
 */
 interface IButton {
    text: string,
    class: string,
    disabled?: boolean;
    id?: string,
    click: () => void,
}

/**
 * Параметры настройки модального окна
 */
interface IModalSettings {
    selectorOrHtml?: string,
    object?: JQuery,
    title?: string,
    titleLowercase?: boolean,
    subTitle?: string,
    content?: string,
    contentClasses?: string,
    buttons: IButton[],
    addCancelButton?: boolean,
    closeClick?: () => void,
    color?: ModalTitleColors
}

/**
 * Размер модального окна 
 * (по умолчанию 670 px)
 */
enum ModalSizeClasses {

    // 440 px
    "sm" = 1,

    // 670 px
    "" = 2, 

    // 900 px
    "xl" = 3
}

enum ModalTitleColors {
    Tenant = "",
    Default = "head-default",
    Success = "head-success",
    Warning = "head-warning",
    Error = "head-error"
}

/**
 * Компонент модальное окно
 */
class Modal {
    constructor(public settings: IModalSettings) {
        let modal = settings.selectorOrHtml ?
            $(settings.selectorOrHtml)
            :
            settings.object;

        let body = modal.find(".modal-body");

        modal.addClass(ModalSizeClasses[modal.attr("modal-size")]);

        if (settings.buttons || settings.addCancelButton) {
            var footer = modal.find(".modal-footer");
            if (footer.length <= 0) {
                footer = $('<div class="modal-footer"></div>');
                if (body) {
                    body.after(footer);
                }
            }

            footer.find('[dynamic="true"]').remove();

            if (settings.addCancelButton) {
                var button = $('<button />', {
                    text: "Отмена",
                    class: "btn btn-outline btn-close",
                    dynamic: "true",
                    type: 'button',
                    click() {
                        modal.fadeOut();
                        if (settings.closeClick) {
                            settings.closeClick();
                        }
                    }
                } as any);
                footer.append(button);
            }

            if (settings.buttons) {
                for (var rawButton of settings.buttons) {
                    var button = $('<button/>',
                        {
                            text: rawButton.text,
                            class: rawButton.class || "btn btn-outline",
                            disabled: rawButton.disabled || null,
                            id: rawButton.id,
                            dynamic: "true",
                            click: rawButton.click.bind(modal)
                        } as any);
                    footer.append(button);
                }
            }
        }
        if (body && $.trim(body.text()) == "") {
            body.hide();
        }

        if (settings.title) {
            var titleElem = modal.find(".modal-title");
            if (titleElem && titleElem.length === 0) {
                var modalHeaderElem = modal.find(".modal-header");
                modalHeaderElem.append("<div class='modal-title uppercase'><H4>{Header}</H4></div>");
                titleElem = modal.find(".modal-title");
            }
            titleElem.find("H4").html(settings.title);

            if (settings.titleLowercase) {
                titleElem.removeClass("uppercase");
            }
        }

        if (settings.subTitle) {
            var subTitleElem = modal.find(".modal-title-small");
            if (subTitleElem && subTitleElem.length === 0) {
                var modalHeaderElem = modal.find(".modal-header");
                modalHeaderElem.append("<p class='modal-title-small'></p>");
                subTitleElem = modal.find(".modal-title-small");
            }
            subTitleElem.html(settings.subTitle);
        }
        
        if (settings.content) {
            var bodyElem = modal.find(".modal-body");
            
            if (bodyElem) {
                bodyElem.html(settings.content)
                bodyElem.css( "display", "block" );
            }

            if (settings.contentClasses && bodyElem) {
                bodyElem.addClass(settings.contentClasses)
            }
        }

        if (settings.color) {
            let values: string = Object.keys(ModalTitleColors)
                .map(key => ModalTitleColors[key])
                .filter(value => value)
                .join(" ");
            modal.removeClass(values);
            modal.addClass(ModalTitleColors[settings.color]);
        }

        modal.find(".close-click, .close, .btn-close").on("click", () => {
            ($(modal) as any).fadeOut();
            if (settings.closeClick) {
                settings.closeClick();
            }
        });

        modal.find(".modal-footer").prev().addClass("no-bottom-space");

        //Закрыть модалку по ESC
        $(document).keydown(e => {
            if (e.keyCode == 27) {
                modal.fadeOut();
                if (settings.closeClick) {
                    settings.closeClick();
                }
            }
        });

        modal.fadeIn();
    }

    /**
     * Инициализация модального окна
    *  Параметры окна:
    *  - selectorOrHtml:    инициализация по селектору
    *  - object:            jQuery объект модального окна
    *  - title:             заголовок модального окна
    *  - titleLowercase:    отображение заголовка строчными буквами (по умолчанию заглавные)
    *  - color:             цвет модального окна
    *  - subTitle:          подзаголовок модального окна
    *  - buttons[]:         список кнопок в футере модального окна
    *       - buttons.text:     наименование кнопки,
    *       - buttons.class:    классы для кнопки
    *       - buttons.id:       id кнопки
    *       - buttons.click:    обработчик клика на кнопку
    *  - addCancelButton:   флаг доабвления кнопки 'Отмена'
    *  - closeClick:        обработчик клика на кнопку 'Отмена'
     */
    public static createModal(settings: IModalSettings) {
        let modal = new Modal(settings);
    }
}