/*jslint browser devel:true, for:true, es6:true */
/*global alert, confirm, console, prompt, jQuery, window, webapi, Promise, async, bootstrap, this */

(function (disrSharedUiUtils, $, undef) {
    'use strict';

    //  Show/hide spinner and hide/show button
    disrSharedUiUtils.showRefreshSpinner = function (_self, isShow) {
        if (isShow) {
            $(_self).find('.spinner-border').each(function () {
                $(this).css("display", "block");
            });
            $(_self).find('.refresh-image').each(function () {
                $(this).css("display", "none");
            });
        } else {
            $(_self).find('.spinner-border').each(function () {
                $(this).css("display", "none");
            });
            $(_self).find('.refresh-image').each(function () {
                $(this).css("display", "block");
            });
        }
    };

    //  Mark current tab
    disrSharedUiUtils.markCurrent = function (newTab, oldTab) {
        $(oldTab.replace('-pane', '-parent')).removeClass('current');
        $(newTab.replace('-pane', '-parent')).addClass('current');
    };

    //  Clear validation errors at the top of the form for all tabs except last (Submit) tab
    disrSharedUiUtils.clearErrorSummary = function ($jsForm) {
        var formName = $jsForm.attr('id');
        const errorsSelector = `#${formName}-errors`;   //  Errors UL
        $(errorsSelector).empty();
        $jsForm.children(errorsSelector + '-wrapper').each(function () {   //  Errors UL Wrapper DIV
            $(this).hide();
        });
    };

    //  Show validation errors at the top of the form for all tabs except last (Submit) tab
    disrSharedUiUtils.showErrorSummary = function ($currentForm) {
        var formName = $currentForm.attr('id');
        const errorsSelector = `#${formName}-errors`;   //  Errors UL

        $(errorsSelector).empty();  //  Clear errored fields from the error summary

        if ($currentForm.get(0).checkValidity()) {  //  if Valid
            $currentForm.children(errorsSelector + '-wrapper').each(function () {   //  Errors UL Wrapper DIV
                $(this).hide();
            });
        } else {  //  if Invalid

            //  Show field instruction and hide tab instruction
            $(errorsSelector + '-instruction-tabs').hide();
            $(errorsSelector + '-instruction-fields').show();

            //  Add errored forms to the error summary
            $currentForm.find('input,select,textarea').each(function () {    //  Add errored fields to the error summary
                if (!$(this)[0].validity.valid) {
                    //  Continue if field is radio and not required
                    if ($(this).is(':radio') && !$(this).prop('required')) {
                        return true;  //  Continue to next field, do not show in summary
                    }
                    var $label = $("label[for='" + $(this).attr('id') + "']");
                    const message = $label.text().replace(' *', '') || ' Value missing or invalid';
                    $(errorsSelector).append('<li style="margin-bottom: 0px;line-height: 1.5;"><a href="javascript:void(0);" class="error-field-link" data-bs-target="' + $(this).attr('id') + '">' + message + '</a></li>');
                }
            });

            //  Show and focus errors section
            $currentForm.children(errorsSelector + '-wrapper').each(function () {   //  Errors UL Wrapper DIV
                $(this).show();
                $('html, body').animate({scrollTop: $(errorsSelector + '-wrapper').offset().top}, 'slow');  //  Focus
                $(errorsSelector+'-wrapper').find('.error-field-link').first().trigger("focus");
            });
        }
    };

    //  Show validation errors at the top of the form for last (Submit) tab
    disrSharedUiUtils.showErrorSummarySubmit = function ($lastForm) {
        var formName = $lastForm.attr('id');
        const errorsSelector = `#${formName}-errors`;   //  Errors UL

        $(errorsSelector).empty();  //  Clear errored fields from the error summary

        const forms = document.querySelectorAll('.needs-validation');

        const invalidForms = [];    //  Array to store invalid forms

        Array.from(forms).forEach(form => {
            if (!form.checkValidity()) {
                invalidForms.push(form.getAttribute('id'));
            }
        });
        console.log('invalidForms:', invalidForms);

        if (invalidForms.length === 0) {  //  if All Valid
            $lastForm.children(errorsSelector + '-wrapper').each(function () {   //  Errors UL Wrapper DIV
                $(this).hide();
            });
            return true;
        } else {  //  if Invalid

            //  Show tab instruction and hide field instruction
            $(errorsSelector + '-instruction-fields').hide();
            $(errorsSelector + '-instruction-tabs').show();

            //  Add errored forms to the error summary
            Array.from(invalidForms).forEach(form => {
                const tabName = form.replace('form', 'tab');
                const tabLabel = $(`#${tabName}`).text();
                $(errorsSelector).append(`<li style="margin-bottom: 0px;line-height: 1.5;">${tabLabel}</li>`);
            });

            //  Show and focus errors section
            $lastForm.children(errorsSelector + '-wrapper').each(function () {   //  Errors UL Wrapper DIV
                $(this).show();
                $('html, body').animate({scrollTop: $(errorsSelector + '-wrapper').offset().top}, 'slow');  //  Focus
            });

            return false;
        }

    };

    //  Confirm modal dialog
    disrSharedUiUtils.confirmModal = function (title, message, okButtonLabel, cancelButtonLabel, handler, sizeClass = "md") {
        $(`<div class="modal fade" id="confirm-modal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
            <div class="modal-dialog ${sizeClass} modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="confirmationModalLabel">${title}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ${message}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-no" data-bs-dismiss="modal">${cancelButtonLabel}</button>
                        <button type="button" class="btn btn-primary btn-yes">${okButtonLabel}</button>
                    </div>
                </div>
            </div>
        </div>`).appendTo('body');

        //  Trigger the modal
        var myModal = new bootstrap.Modal(document.getElementById("confirm-modal"), {
            backdrop: 'static',
            keyboard: false
        });
        myModal.show();

        // Pass true to a callback function
        $(".btn-yes").click(function () {
            handler(true);
            $("#confirm-modal").modal("hide");
        });

        // Pass false to callback function
        $(".btn-no").click(function () {
            handler(false);
            $("#confirm-modal").modal("hide");
        });

        // Remove the modal once it is closed.
        $("#confirm-modal").on('hidden.bs.modal', function () {
            $("#confirm-modal").remove();
        });
    }

    //  Confirm modal dialog
    disrSharedUiUtils.infoModal = function (title, message, okButtonLabel, handler, sizeClass = "md") {
        $(`<div class="modal fade" id="info-modal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
            <div class="modal-dialog ${sizeClass} modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="confirmationModalLabel">${title}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ${message}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-yes" data-bs-dismiss="modal">${okButtonLabel}</button>
                    </div>
                </div>
            </div>
        </div>`).appendTo('body');

        //  Trigger the modal
        var myModal = new bootstrap.Modal(document.getElementById("info-modal"), {
            backdrop: 'static',
            keyboard: false
        });
        myModal.show();

        // Pass true to a callback function
        $(".btn-yes").click(function () {
            handler(true);
            $("#info-modal").modal("hide");
        });

        // Remove the modal once it is closed.
        $("#info-modal").on('hidden.bs.modal', function () {
            $("#info-modal").remove();
        });
    }

    // Private Method

}( window.disrSharedUiUtils = window.disrSharedUiUtils || {}, jQuery));