const loadingView = (function () {
    let $loding_next;

    const _component =  {
        loading: function() {
            let html = "";
            html += '<div class="loading-wrap" id="loding_next" style="display: none">'
            html +=		'<div class="loading-black">'
            html +=			'<div class="loading-next">'
            html +=				'<i class="icon loading-next"></i>'
            html +=				'<div class="progress">'
            html +=					'<div class="progress-container">'
            for(let i=0; i<loddingMsg[__LANG]['textLength']; i++){
                html +=						'<label style="animation: 5s ease-in-out '+ ((loddingMsg[__LANG]['textLength']*100) - (i*100)) +'ms infinite normal none running anim;">'+loddingMsg[__LANG][i]+'</label>'
            }
            html +=					'</div>'
            html +=				'</div>'
            html +=				'<span class="loading-text">'+loddingMsg[__LANG]['text']+'</span>'
            html +=			'</div>'
            html +=		'</div>'
            html +=	'</div>';
            return html;
        },
    }
    const init = function () {
        if($('#loding_next').length === 0 ) $('#loding_div').append(_component.loading());
        $loding_next = $('#loding_next');
    }
    const show = function (msg) {
        if (msg) $("#loding_next span").text(msg);
        if (!$loding_next.is(":visible")) $loding_next.show();
    };
    const hide = function () {
        if ($loding_next.is(":visible")) $loding_next.hide();
        $("#loding_next span").text(loddingMsg[__LANG]['text']);
    }
    return {init, show, hide};
})();

const cbjPopup = (function () {
    const $html = $('html');
    const open = function (id) {
        $html.addClass('modal');
        $(`#${id}`).parent().addClass('active');
    };
    const close = function (id) {
        $(`#${id}`).parent().removeClass('active');
        // 열린(active) popup or modal이 없으면
        if (!($(".popup.active").length || $(".cbj-modal").length)) $html.removeClass('modal');
    };

    const closeAll = function() {
        $html.removeClass('modal');
        $(".popup-bg").removeClass('active');
    }
    return {open, close, closeAll}
})();

const cbjModal = (function () {
    const $html = $('html');
    let $cbj;
    let $cbjModal;
    const _component = {
        common: function (props, modalEl) {
            const {title = __CBJ_STRING["ALERT"], message = ""} = props;
            return `
                <div class="cbj-modal">
                    <div class="popup-head">
                        <div class="flex-1 flex-content-start">
                            <p class="font-b-18 txt-color-black">${title}</p>
                        </div>
                        <button onclick="cbjModal.close();">
                        </button>
                    </div>
                    <div class="popup-body">
                        <p class="font-b-16 txt-color-black">${message}</p>
                        ${modalEl}
                    </div>
                </div>
            `;
        },
        alert: function (props) {
            const { dataLink } = props;
            return this.common(props, `
                <div class="flex-content-center">
                    <button class="btn red" id="clickOk" ${dataLink}>${__CBJ_STRING["CONFIRM"]}</button>
                </div>
            `);
        },
        confirm: function (props) {
            const {
                confirmTxt = __CBJ_STRING["CONFIRM"],
                rejectTxt = __CBJ_STRING["REJECT"],
                confirmDataLink = ``, // adobe analytics data link
                rejectDataLink = ``, // adobe analytics data link
            } = props;
            return this.common(props, `
                <div class="flex-content-center gap-12">
                    <button class="btn pd-0" id="clickNo" ${rejectDataLink}>${rejectTxt}</button>
                    <button class="btn red pd-0" id="clickYes" ${confirmDataLink}>${confirmTxt}</button>
                </div>
            `);
        },
        overlay: function () {
            return `<div class="bg-overlay" id="cbj-modal" style="display: none;"></div>`;
        }
    }
    const init = function () {
        $cbj = $(".chabangjung-container");
        // cbj 모바일 화면일 때만 표시
        if ($cbj.length) {
            $cbj.append(_component.overlay({}));
            $cbjModal = $("#cbj-modal");
        }
    };
    const alert = function (message, callback, dataLink, title) {
        $html.addClass('modal');
        $cbjModal.append(_component.alert({message, dataLink, title}));
        $cbjModal.show();

        $("#clickOk").on("click", function() {
            close();
            if(callback instanceof Function) callback();
        });
    };

    const confirm = function (props, callback) {
        $html.addClass("modal");
        $cbjModal.append(_component.confirm(props));
        $cbjModal.show();

        $("#clickYes").on("click", function() {
            close();
            if(callback instanceof Function) callback(true);
        });
        $("#clickNo").on("click", function() {
            close();
            if(callback instanceof Function) callback(false);
        });
    }
    const close = function () {
        $cbjModal.empty();
        $cbjModal.hide();

        // 열린(active) popup or modal이 없으면
        if(!($(".popup.active").length || $(".cbj-modal").length)) $html.removeClass('modal');
    };

    return {init, alert, confirm, close};
})();

const cbjSnackBar = (function () {
    let $cbj;
    const _component = {
        snackbar: function (type) {
            return `
                <div class="snackbar">
                    ${type === "S"
                ? '<span class="ico-check1-filled"></span>'
                : '<span class="ico-close1-filled-red"></span>'}
                    <p class="font-b-14 txt-color-white"></p>
                </div>
            `;
        }
    }
    const show = function (type, message) {
        $cbj = $(".chabangjung-container");
        // cbj 모바일 화면일 때만 표시
        if ($cbj.length) {
            $cbj.append(_component.snackbar(type));
        }

        const $snackbar = $(".snackbar");

        $snackbar.addClass('show');
        $snackbar.children("p").text(message);
        setTimeout(function () {
            $snackbar.remove();
        }, 2950);
    };
    return {show}
})();

const cbjCommon = (function() {
    let _this;
    let $cbj;
    const init = function() {
        _this = this;

        $cbj = $(".chabangjung-container");
        if ($cbj.length) { // cbj PC 화면일 때
            $(".select").on("click", _this.change.select);
            $(".select").on("blur", _this.change.select);
            $(".select .option").on("click", _this.change.option);
            $(".input-text").on("keyup", _this.change.inputFocusMove);
            $(".text-area").children("textarea").on("input", _this.change.textarea);
            // provision
            $(".provision > .title").on("click", _this.change.provision);
        }
    };

    const change = {
        select: function() {
            const $select = $(this);
            if ($select.hasClass("disabled")) return; // disabled
            if ($select.hasClass("active") || !$select.is(":focus")) {
                $select.removeClass("active");
            } else {
                $select.focus();
                $select.addClass("active");
            }
        },
        option: function() {
            const $option = $(this);
            const $input = $option.parent().prev().children("input");
            $option.parent().children(".option").removeClass("selected");
            $option.addClass("selected");
            $input.val($option.children("p").text());
            $input.data("value", $option.val());
            $input.trigger("change");
        },
        inputFocusMove: function () {
            const $this = $(this);
            if ($this.val().length >= parseInt($this.attr("maxlength"))) {
                $this.nextAll(".input-text").eq(0).focus();
                return false;
            }
        },
        textarea: function() {
            const $textArea = $(this);
            $textArea.next().text(`${$textArea[0].value.length}자/${$textArea.prop('maxlength')}자`);
        },
        provision: function () {
            const $provision = $(this);
            if ($provision.parent().hasClass("active")) {
                $provision.parent().removeClass("active");
            } else {
                $provision.parent().addClass("active");
            }
            $provision.parent().children(".detail").toggle();
        },
    };

    const action = {
        ajaxSuccessProcessor: function (response, successCallback, failureCallback) {
            if (response?.data) {
                if (successCallback instanceof Function) successCallback();
                return;
            }
            if (response?.exception?.description) {
                cbjModal.alert(response.exception.description);
                if (failureCallback instanceof Function) failureCallback();
                return;
            }
            cbjModal.alert(__CBJ_ERROR_MSG["404"]);
            if (failureCallback instanceof Function) failureCallback();
        },
        ajaxErrorProcessor: function (failureCallback) {
            cbjModal.alert(__CBJ_ERROR_MSG["404"]);
            if (failureCallback instanceof Function) failureCallback();
        }
    }
    return {init, change, action}
})();

$(function () {
    // DOM loading 완료

    // loading processor 표시;
    loadingView.init();

    cbjCommon.init();
    cbjModal.init();
});

$(window).on("load", function () {
    // resources loading 완료

})