/* util */
const ssmFunc = (opt) => {
    const ssmPc = opt.hasOwnProperty('pc') && opt.pc;
    const ssmTa = opt.hasOwnProperty('ta') && opt.ta;
    const ssmMo = opt.hasOwnProperty('mo') && opt.mo;

    if (ssmPc) {
        ssm.addState({
            id: 'pc',
            query: '(min-width: 1280px)',
            onEnter: () => opt.pc(),
        });
    }
    if (ssmTa) {
        ssm.addState({
            id: 'ta',
            query: '(min-width: 768px) and (max-width: 1279px)',
            onEnter: () => opt.ta(),
        });
    }
    if (ssmMo) {
        ssm.addState({
            id: 'mo',
            query: '(max-width: 767px)',
            onEnter: () => opt.mo(),
        });
    }
};

const toggleCommonFunc = ({ obj, className, hasClass, noneClass }) => {
    $(obj).toggleClass(className);
    if ($(obj).hasClass(className)) {
        hasClass(obj);
    } else {
        noneClass();
    }
};

window.ssmFunc = ssmFunc;
window.toggleCommonFunc = toggleCommonFunc;

export const util = {
    ssmFunc,
    toggleCommonFunc,
};

/* popup */
// const popupManager = (() => {
//     let openPopupsPub = [];
//     let dimZIndexPub = 97;

//     const popupOpenPub = (target) => {
//         const $pop = $(`[data-popuppub="${target}"]`);
//         if ($pop.hasClass('popup-alert-area')) {
//             $pop.css({ 'display': 'flex' });
//             return;
//         } else {
//             openPopupsPub.push(target);
//             dimZIndexPub += 2;
//             $pop.css({ 'display': 'flex', 'z-index': dimZIndexPub + 1 }).addClass('is-active');
//             $('.dim').css({ 'z-index': dimZIndexPub }).show();
//             $('body').css({ 'overflow-y': 'hidden' });
//         }
//     };

//     const popupClosePub = (target) => {
//         const $pop = $(`[data-popuppub="${target}"]`);
//         if ($pop.hasClass('popup-alert-area')) {
//             $pop.fadeOut(200);
//             return;
//         } else {
//             openPopupsPub = openPopupsPub.filter(item => item !== target);
//             if (openPopupsPub.length === 0) {
//                 $('body').css({ 'overflow-y': 'auto' });
//                 $pop.add('.dim').fadeOut(100).removeClass('is-active');
//                 dimZIndexPub = 97;
//             } else {
//                 dimZIndexPub -= 2;
//                 $pop.fadeOut(200, () => {
//                     $('.dim').css({ 'z-index': dimZIndexPub });
//                 });
//             }
//         }
//     };

//     $(document).on('click', '[data-popuppub] .pop-close', function () {
//         const target = $(this).closest($('[class^=popup][data-popuppub]')).data('popuppub');
//         popupClosePub(target);
//     });

//     $('.dim').on('click', () => {
//         if (openPopupsPub.length > 0) {
//             const topPopup = openPopupsPub[openPopupsPub.length - 1];
//             popupClosePub(topPopup);
//         }
//     });

//     window.popupOpenPub = popupOpenPub;
//     window.popupClosePub = popupClosePub;

// })();
const popupManager = (() => {
    let openPopupsPub = [];
    let dimZIndexPub = 97;
    let lastFocusedElement = null;

    const popupOpenPub = (target) => {
        lastFocusedElement = document.activeElement;
        const $pop = $(`[data-popuppub="${target}"]`);
        if ($pop.hasClass('popup-alert-area')) {
            $pop.css({ 'display': 'flex' });

            setTimeout(() => {
                $pop.find('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]').first().focus();
            }, 10);

            return;
        } else {
            openPopupsPub.push(target);
            dimZIndexPub += 2;
            $pop.css({ 'display': 'flex', 'z-index': dimZIndexPub + 1 }).addClass('is-active');
            $('.dim').css({ 'z-index': dimZIndexPub }).show();
            $('body').css({ 'overflow-y': 'hidden' });

            setTimeout(() => {
                $pop.find('button, a').first().focus();
            }, 10);
        }
    };

    const popupClosePub = (target) => {
        const $pop = $(`[data-popuppub="${target}"]`);
        if ($pop.hasClass('popup-alert-area')) {
            $pop.fadeOut(200, () => {
                if (lastFocusedElement) {
                    lastFocusedElement.focus(); // 이전 요소로 포커스 복귀
                }
            });
            return;
        } else {
            openPopupsPub = openPopupsPub.filter(item => item !== target);
            if (openPopupsPub.length === 0) {
                $('body').css({ 'overflow-y': 'auto' });
                $pop.add('.dim').fadeOut(100).removeClass('is-active');
                dimZIndexPub = 97;
            } else {
                dimZIndexPub -= 2;
                $pop.fadeOut(200, () => {
                    $('.dim').css({ 'z-index': dimZIndexPub });
                });
            }

            setTimeout(() => {
                if (lastFocusedElement) {
                    lastFocusedElement.focus(); // 이전 요소로 포커스 복귀
                }
            }, 10);
        }
    };

    $(document).on('click', '[data-popuppub] .pop-close', function () {
        const target = $(this).closest($('[class^=popup][data-popuppub]')).data('popuppub');
        popupClosePub(target);
    });

    $('.dim').on('click', () => {
        if (openPopupsPub.length > 0) {
            const topPopup = openPopupsPub[openPopupsPub.length - 1];
            popupClosePub(topPopup);
        }
    });

    window.popupOpenPub = popupOpenPub;
    window.popupClosePub = popupClosePub;

})();

/* layerManager */
const layerManager = {
    layerOpen: (target, el) => {
        const $layer = $(`[data-layer="${target}"]`);
        const $el = $(el);
        const offsetTop = $el.offset().top + ($el.height() / 2 - 20);
        const offsetLeft = $el.offset().left + ($el.width() + 20);
        $layer.css({ "top": offsetTop, "left": offsetLeft }).fadeIn(200);
    },

    layerClose: (target) => {
        const $layer = $(`[data-layer="${target}"]`);
        $layer.fadeOut(200);
    }
};

/* toastManager */
const toastManager = (() => {
    let toastTimer;

    const toastShow = (message) => {
        clearTimeout(toastTimer);

        $(".toast").text(message);
        $(".toast").removeClass("is-hidden is-hide").addClass("is-show");

        toastTimer = setTimeout(() => {
            toastHide();
        }, 2000);
    };

    const toastHide = () => {
        clearTimeout(toastTimer);

        $(".toast").removeClass("is-show").addClass("is-hide");

        toastTimer = setTimeout(() => {
            $(".toast").addClass("is-hidden");
        }, 1000);
    };

    window.toastShow = toastShow;
    window.toastHide = toastHide;
})();

export const popup = {
    popupManager,
    layerManager,
    toastManager,
};


(function ($) {
    $.fn.accordionFunc = function () {
        $(document).on('click', '.btn-accordion-toggle', function (e) {
            const $targetBtn = $(e.target).closest('.btn-accordion-toggle');
            const $currentLi = $targetBtn.closest('li');
            const $accordion = $currentLi.closest('.accordion'); 
            const $btns = $accordion.find('li .btn-accordion-toggle');

            $currentLi.siblings('li').removeClass('is-active');

            toggleCommonFunc({
                obj: $currentLi,
                className: 'is-active',
                hasClass: function () {
                    $btns.html('열기');
                    $targetBtn.html('닫기');
                },
                noneClass: function () {
                    $btns.html('열기');
                }
            });
        });

        return this;
    };
})(jQuery);


export const common = {
    // Accordion Function
    // accordionFunc: function () {
    //     const init = function (obj) {
    //         const $btn = $(obj).find('li').find('.btn-accordion-toggle');
    //         $(document).on('click', $btn, function (e) {
    //             const $target = $(e.target);
    //             if ($target.is($btn)) {
    //                 $target.closest('li').siblings('li').removeClass('is-active');
    //                 toggleCommonFunc({
    //                     obj: $target.closest('li'),
    //                     className: 'is-active',
    //                     hasClass: function (obj) {
    //                         //$(obj).removeClass('is-active');
    //                         TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 0}, {opacity: 1});
    //                         $btn.html('열기');
    //                         $target.html('닫기');
    //                     },
    //                     noneClass: function (obj) {
    //                         TweenMax.fromTo('.accordion-txt-area', .5, {opacity: 1}, {opacity: 0});
    //                         $btn.html('열기');
    //                     }
    //                 });
    //             }
    //         });
    //     };
    //     init(this);
    //     return this; // For chainability
    // },

    // Section Accordion Function
    sectionAccordionFunc: function () {
        const init = function (obj) {
            $(document).on('click', '.btn-section-accordion-toggle', function () {
                const $btn = $(this);
                const $area = $(this).closest('.section-accordion');
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-close',
                    hasClass: function (obj) {
                        $btn.html('열기');
                    },
                    noneClass: function (obj) {
                        $btn.html('접기');
                    }
                });
            });
        };
        init(this);
        return this; // For chainability
    },

     stepUnitAccordionFunc: function () {
        const init = function (obj) {
            $(document).on('click', '.btn-step-unit-accordion-toggle', function () {
                const $btn = $(this);
                const $area = $(this).closest('.step-unit-accordion');
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-close',
                    hasClass: function (obj) {
                        // $btn.html('열기');
                    },
                    noneClass: function (obj) {
                        // $btn.html('접기');
                    }
                });
            });
        };
        init(this);
        return this; // For chainability
    },

    // Tabs Normal Function
    tabsNormalFunc: function () {
        const init = function (obj) {
            const showTab = function (tabSelector) {
                $(tabSelector).addClass('is-active');
                const $tabsNav = $(tabSelector).find("[class^='tabs-nav'] a.is-active");
                if ($tabsNav.length > 0) {
                    const tabHref = $tabsNav.attr('href');
                    const $tabsCont = $(tabSelector).find('.tabs-cont' + tabHref);
                    $tabsCont.addClass('is-active');
                }
            };

            const showInitialTabs = function () {
                const $currentTab = $(obj).children("[class^='tabs-nav']").find('a.is-active');
                const $currentTabCont = $currentTab.attr('href');
                showTab($currentTabCont);
                $(obj).find('.tabs-normal').not(':first').each(function () {
                    init(this);
                });
            };

            const setActiveTab = function (tabLink) {
                if (!$(tabLink).hasClass("is-active")) {
                    $(tabLink).closest("[class^='tabs-nav']").find('a').removeClass("is-active").removeAttr("title");
                    $(tabLink).addClass("is-active").attr("title", "선택됨");
                }
            };

            const hideTabs = function (tabsContainer) {
                $(tabsContainer).find('.tabs-cont').removeClass('is-active').removeAttr("title");
            };

            const handleTabClick = function (e) {
                const $tabLink = $(this);
                const $tabsNormal = $tabLink.closest('.tabs-normal');
                setActiveTab($tabLink);
                hideTabs($tabsNormal);

                const $activeTab = $tabLink.attr('href');
                showTab($activeTab);

                e.preventDefault();
            };

            $(document).on('click', ".tabs-normal .tabs-nav-lg a, .tabs-normal .tabs-nav a, .tabs-normal .tabs-nav-sm a, .tabs-normal .tabs-nav-xsm a,.tabs-normal .tabs-nav-img a", handleTabClick);

            showInitialTabs();
        };

        $(this).each(function () {
            init(this);
        });
        return this; // For chainability
    },

     // toggleFunc
     toggleFunc: function () {
        var init = function (obj) {
            var $currentTab = $(obj).find("[data-toggle]").find('a.is-active').attr('href');
            $($currentTab).show();
            $(document).on('click', '[data-toggle]', function (e) {
                var val = $(this).data('toggle');
                var $el = $('[data-toggleobj="' + val + '"]');
                var $btn = $('[data-toggle="' + val + '"]');
                toggleCommonFunc({
                    obj: $btn,
                    className: 'is-active',
                    hasClass: function (obj) {
                        $el.css({'display': 'flex'});
                    },
                    noneClass: function (obj) {
                        $el.css({'display': 'none'});
                    }
                });
            });
        };
        init(this);
        return $(this);
    },

    // btnToggleFunc
    btnToggleFunc: function () {
        var init = function (obj) {
            $(document).on('click', '.btn-toggle, .btn.toggle, .btn-text.toggle', function (e) {
                let $btn;
                $btn = $(this);
                toggleCommonFunc({
                    obj: $btn,
                    className: 'is-active',
                    hasClass: function (obj) {
                        if ($btn.attr("data-txt")) {
                            var txt = $btn.data("txt");
                            $btn.html(txt);
                        }
                        if ($btn.attr("data-toast")) {
                            var message = $btn.data("toast");
                            toastShow(message);
                        }
                        if ($btn.attr('data-btntoggle')) {
                            val = $btn.data('btntoggle');
                            $el = $('[data-btntoggleobj="' + val + '"]');
                            $el.addClass('is-active');
                        }
                    },
                    noneClass: function (obj) {
                        if ($btn.attr("data-txt-inactive")) {
                            var txt = $btn.data("txt-inactive");
                            $btn.html(txt);
                        }
                        if ($btn.attr("data-toast-inactive")) {
                            var message = $btn.data("toast-inactive");
                            toastShow(message);
                        }
                        if ($btn.attr('data-btntoggle')) {
                            val = $btn.data('btntoggle');
                            $el = $('[data-btntoggleobj="' + val + '"]');
                            $el.removeClass('is-active');
                        }
                    }
                });
            });
        };
        init(this);
        return $(this);
    },

    // tipFunc
    tipFunc: function () {
        var init = function (obj) {
            var txt = $(obj).find("[data-tip]:checked").data('tip');
            var $tip = $(obj).find('.tip-txt');
            $tip.css({
                'display': 'flex'
            }).html(txt);
            $(document).on('click', '[data-tip]', function (e) {
                var $area = $(this).closest('.tip-area');
                txt = $(this).data('tip');
                $tip = $area.find('.tip-txt');
                $tip.css({
                    'display': 'flex'
                }).html(txt);
            });
        };
        init(this);
        return $(this);
    },
  
    //tooltipFunc
    tooltipFunc: function () {
        var init = function (obj) {
            $(document).on('click', '.btn-tooltip', function (e) {
                var $area;
                $area = $(this).closest('.tooltip');
                $('.tooltip').removeClass('is-active');
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-active',
                    hasClass: function (obj) {
                    },
                    noneClass: function (obj) {

                    }
                });
            });
            $(document).click(function (e) {
                if (!$(e.target).is('.btn-tooltip')) {
                    $('.tooltip').removeClass('is-active');
                }
            });
        };
        init(this);
        return $(this);
    },

    // etcFunc
    etcFunc: function () {
        var init = function (obj) {
            $(document).on('click', '.btn-etc-fnc', function (e) {
                var $area; 
                var $el;
                $area = $(this).closest('.etc-fnc-area');
                $el = $area.find('.etc-fnc');
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-active',
                    hasClass: function (obj) {
                        var $elArea;
                        $elArea = $el.closest('.etc-fnc-area');
                        TweenMax.fromTo($el, .5, { opacity: 0 }, { opacity: 1 });
                        $('.etc-fnc-area').not($elArea).removeClass('is-active');
                    },
                    noneClass: function (obj) {
                        TweenMax.fromTo($el, .5, { opacity: 1 }, { opacity: 0 });
                    }
                });
            });
            $(document).click(function (e) {
                if (!$(e.target).is('.btn-etc-fnc')) {
                    $('.etc-fnc-area').removeClass('is-active');
                }
            });
        };
        init(this);
        return $(this);
    },
    
    // schboxFunc
    schboxFunc: function () {
        var init = function (obj) {
            if ($(".search-box").length === 0) {
                return;
            } else {
                var searchBox = $(".search-box"),
                    searchBoxBtnTxt = searchBox.find('.btn-search-toggle span'),
                    searchBoxHeight = searchBox.outerHeight(true),
                    searchBoxPosition = searchBox.offset().top + searchBoxHeight,
                    searchBoxOpen = false,
                    searchBoxNext = $(".search-box-area");

                if ($('.search-box.is-active').length > 0) {
                    searchBoxOpen = true;
                    searchBoxHeight = searchBox.outerHeight(true);
                    searchBoxPosition = searchBox.offset().top + searchBoxHeight;
                } else {
                    searchBoxHeight = searchBox.outerHeight(true);
                    searchBoxPosition = searchBox.offset().top + searchBoxHeight;
                }

                $(document).on('click', '.btn-search-toggle', function (e) {
                    $btn = $(this);
                    $area = $(this).closest('.search-box');
                    $cont = $area.find('.write-type2');

                    if ($(window).scrollTop() < searchBoxPosition) {
                        if ($area.hasClass('is-active')) {
                            searchBoxOpen = false;
                            $area.removeClass('is-active');
                            $btn.find('span').html('상세검색 열기');
                            searchBoxHeight = searchBox.outerHeight(true);
                            searchBoxPosition = searchBox.offset().top + searchBoxHeight;
                        } else {
                            searchBoxOpen = true;
                            $area.addClass('is-active');
                            $btn.find('span').html('상세검색 닫기');
                            searchBoxHeight = searchBox.outerHeight(true);
                            searchBoxPosition = searchBox.offset().top + searchBoxHeight;
                        }
                    } else {
                        if ($area.hasClass('is-active')) {
                            $area.removeClass('is-active');
                            $btn.find('span').html('상세검색 열기');
                        } else {
                            $area.addClass('is-active');
                            $btn.find('span').html('상세검색 닫기');
                        }
                    }
                });

                $(window).scroll(function () {
                    var scrollPosition = $(window).scrollTop();

                    if (scrollPosition > searchBoxPosition) {
                        if (searchBox.hasClass('is-active')) {
                            searchBox.removeClass('is-active');
                            searchBoxBtnTxt.html('상세검색 열기');
                        }
                        searchBox.addClass('is-sticky');
                        searchBoxNext.css('margin-top', searchBoxHeight + 'px');
                    } else {
                        if (searchBoxOpen) {
                            searchBox.addClass('is-active');
                            searchBoxBtnTxt.html('상세검색 닫기');
                            searchBox.removeClass('is-sticky');
                            searchBoxNext.css('margin-top', 0);
                        } else {
                            searchBox.removeClass('is-sticky');
                            searchBoxNext.css('margin-top', 0);
                        }
                    }
                });

                $(window).resize(function () {
                    searchBoxHeight = searchBox.outerHeight(true);
                    searchBoxPosition = searchBox.offset().top + searchBoxHeight;
                });
            }
        };
        init(this);
        return $(this);
    },
  
    headerUserFunc: function () {
        var init = function (obj) {
            $(document).on('click', '.site-header .btn-user-fnc-toggle', function (e) {
                var $area; 
                var $el;
                var $btn  = $(this);
                $area = $(this).closest('.user-area');
                $el = $area.find('.user-fnc-list');
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-active',
                    hasClass: function (obj) {
                        $btn.html('열기');
                    },
                    noneClass: function (obj) {
                        $btn.html('닫기');
                    }
                });
            });
            $(document).click(function (e) {
                if (!$(e.target).is('.site-header .btn-user-fnc-toggle')) {
                    $('.site-header .user-area').removeClass('is-active');
                }
            });
        };
        init(this);
        return $(this);
    },
    btnUtilFunc: function () {
        var init = function (obj) {
            $(document).on('click', '.btn-util-toggle', function (e) {
                e.stopPropagation(); // 이벤트 버블링 막기
            
                var $btn = $(this);
                var $area = $btn.closest('.btn-util-area');
                var $el = $area.find('.util-list');
            
                toggleCommonFunc({
                    obj: $area,
                    className: 'is-active',
                    hasClass: function (obj) {
                        // 필요하면 로직 추가
                    },
                    noneClass: function (obj) {
                        // 필요하면 로직 추가
                    }
                });
            });
            
            $(document).click(function (e) {
                if (!$(e.target).closest('.btn-util-area').length) {
                    $('.btn-util-area').removeClass('is-active');
                }
            });
        };
        init(this);
        return $(this);
    },

    siteMenuFunc: function () {
        var init = function (obj) {
            // 메뉴 열기
            $(document).on("click", ".btn-site-menu-open", function (e) {
                $(".site-menu-area").addClass("is-active"); 
            });

            // 메뉴 닫기
            $(document).on("click", ".btn-site-menu-close", function (e) {
                $(".menu > li > ul > li").removeClass("is-active");
                $(".site-menu-area").removeClass("is-active"); 
            });

            // 메뉴 영역 바깥 클릭 시 닫기
            $(document).on("click", ".site-menu-area", function (e) {
                if (!$(e.target).closest(".site-menu").length) {
                    $(".btn-site-menu-close").trigger("click");
                }
            });

            // 서브 메뉴 토글
            $(document).on("click", ".site-header .menu > li > ul > li > a", function (e) {
                if ($(this).next("ul").length) {
                    e.preventDefault(); 
            
                    let $subMenu = $(this).next("ul");
                    let $parentLi = $(this).closest('li'); 
                    let isActive = $parentLi.hasClass("is-active");
            
                    $(".menu > li > ul > li").removeClass("is-active");
            
                    if (!isActive) {
                        $parentLi.addClass("is-active"); 
                    }
                }
            });
        };
        init(this);
        return $(this);
    },
};

$.extend($.fn, common);

window.common = common;


export const initCommon= () => {
    $(document).ready(function () {
        $('.accordion, .accordion-nav, .accordion-list').accordionFunc();
        $('.section-accordion').sectionAccordionFunc();
        $('.step-unit-accordion').stepUnitAccordionFunc();
        $('.tabs-normal').tabsNormalFunc();
        $('[data-toggle]').toggleFunc();
        $('.btn-toggle, .btn.toggle, .btn-text.toggle').btnToggleFunc();
        $('.tip-area').tipFunc();
        $('.tooltip').tooltipFunc();
        $('.etc-fnc-area').etcFunc();
        //$('.search-box').schboxFunc();
        $('.site-header .user-area').headerUserFunc();
        $('.btn-util-area').btnUtilFunc();
        $('.site-menu-area').siteMenuFunc();

        $('input[type=date]').on('focus', function() {
            this.showPicker();
        });
    });

    $(document).on('keydown', '.site-header .gnb > ul > li > a, .site-header .gnb > ul > li > button', function (event) {
        if (event.key === 'Enter') {
            $(this).closest('li').addClass('is-active');
        }
    });

    $(document).on('focusout', '.site-header .gnb > ul > li.is-active > ul > li:last-child a', function (event) {
        setTimeout(() => {
            if (!$('.site-header .gnb > ul > li.is-active ul li a').is(':focus')) {
                $(this).closest('ul').closest('li').removeClass('is-active');
            }
        }, 10);
    });
};