// script.js : 모든 페이지에서 공통으로 사용되는 스크립트를 모아놓은 파일입니다.
// 선택적으로 사용하시면 됩니다.
//

// 검색창 관련 스크립트

var searchPopup = $(".header-search-pop");
var searchBar = $("#header-search-bar");
var searchTextDeleteBtn = $(".header-search-pop__text-delete-btn");
var searchBody = $(".header-search-pop__body");
var searchAutoComplete = $(".header-search-pop__auto-complete");
var recentSearchList = $(".header-search-pop__recent-search-list");
var recentSearchDelete = $(".header-search-pop__recent-search-delete");
var recentSearchDeleteAll = $(".header-search-pop__recent-search-deleteAll");

// 메인 검색창 클릭시 검색 팝업 띄우기
$("#header-search-trigger").click(function (e) {
    e.stopPropagation();
    searchPopup.addClass("active");
    searchBody.addClass("active");
    searchBar.focus();
});

// 메인 검색창 포커스시 검색 팝업 띄우기
$("#header-search-trigger").keyup(function (e) {
    searchPopup.addClass("active");
    searchBody.addClass("active");
    searchBar.focus();
});

// 검색 팝업 외 클릭 시 검색 팝업 닫기, "닫기" 버튼 클릭 시 검색 팝업 닫기
$("header, main").click(function (e) {
    if (searchPopup.hasClass("active")) {
        searchPopup.removeClass("active");
        searchAutoComplete.removeClass("active");
        searchTextDeleteBtn.removeClass("active");
        searchBar.val("");
    }
});

$(".header-search-pop__close").click(function (e) {
    e.preventDefault();
    searchPopup.removeClass("active");
    searchBar.val("");
});

$(".header-search-pop__close").blur(function (e) {
    e.preventDefault();
    searchPopup.removeClass("active");
    searchAutoComplete.removeClass("active");
});

$(searchPopup).click(function (e) {
    e.stopPropagation();
});

// 검색창 입력시 자동완성 띄우기, 검색창 값 없을시 자동완성 숨기기
searchBar.on("keyup", function (e) {
    if (e.currentTarget.value !== "") {
        searchTextDeleteBtn.addClass("active");
        searchBody.removeClass("active");
        searchAutoComplete.addClass("active");
    } else {
        searchTextDeleteBtn.removeClass("active");
        searchBody.addClass("active");
        searchAutoComplete.removeClass("active");
    }
});

// x 버튼 클릭시 검색창 값 초기화
searchTextDeleteBtn.click(function (e) {
    e.preventDefault();
    searchBar.val("");
    searchTextDeleteBtn.removeClass("active");
    searchAutoComplete.removeClass("active");
    searchBody.addClass("active");
    searchBar.focus();
});

// 검색 내용 없을 시, 레이어팝업 띄우기
$("#search-form").on("submit", function (e) {
    if (searchBar.val() === "") {
        e.preventDefault();
        $("#enter-keyword").modal();
        $(".close-modal").focus();
    }
});

// 최근 검색어 삭제
recentSearchDelete.on("click", function (e) {
    $(this).parent().remove();
    if (recentSearchList.children().length === 0) {
        createNoResult();
    }
});

// 최근 검색어 전체 삭제
recentSearchDeleteAll.on("click", function (e) {
    recentSearchList.empty();
    createNoResult();
});

// 최근 검색어 없을 시, "최근 검색어가 없습니다." 문구 생성
$(document).ready(function () {
    if (recentSearchList.children().length === 0) {
        createNoResult();
    }
});

function createNoResult() {
    var noResult = $("<p>")
        .addClass("header-search-pop__recent-search-noResult")
        .text("최근 검색한 검색어가 없습니다.");
    recentSearchList.append(noResult);
}

// 실시간 검색 스크립트

// 실시간 검색
$("#search-trend").vTicker({
    speed: 500,
    pause: 3000,
    showItems: 1,
    mousePause: true,
    height: 0,
    animate: true,
    margin: 0,
    padding: 0,
    startPaused: false,
});

var isSearchTrendOpen = false;

$(".search-trend__drop-down-trigger").on("click", function (e) {
    e.preventDefault();
    isSearchTrendOpen = !isSearchTrendOpen;
    $(this).closest(".header-trend").css("overflow", "visible");
    if (isSearchTrendOpen) {
        $(".search-trend__drop-down").addClass("active");
    } else {
        $(".search-trend__drop-down").removeClass("active");
    }

    $(this).toggleClass("active");
});

$("header, main, #header-search-trigger").click(function (e) {
    if (isSearchTrendOpen) {
        $(".search-trend__drop-down").removeClass("active");
        $(".search-trend__drop-down-trigger").removeClass("active");
        isSearchTrendOpen = false;
    }
});

$(".search-trend__drop-down, .search-trend__drop-down-trigger").click(function (e) {
    e.stopPropagation();
});

// 상단 띠 배너 스크립트

// 상단 띠 배너
$(".top-banner-slick").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    speed: 900,
    infinite: true,
    centerMode: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
});

// 상단 띠 배너 닫기 버튼
$(".top-banner__close").click(function () {
    $(".top-banner img").fadeOut(340);
    $(".top-banner").slideUp(500);
});

// 상품옵션 팝업

// 상품옵션 팝업 띄우기
$(".product-unit-addToCart").on("click", function (e) {
    e.preventDefault();
    $("#product-option-popUp").modal({ clickClose: false });
});

// 체크박스 주변 박스 클릭 시, 체크박스 체크/해제
$(".product-option__item").click(function (e) {
    e.stopPropagation();
    $(this)
        .find("input[type=checkbox]")
        .prop("checked", !$(this).find("input[type=checkbox]").prop("checked"));
});

// 숫자 3자리 마다 "," 찍기

var threeDigitComma = $(".three-digit-comma");

threeDigitComma.each(function () {
    var num = $(this).text();
    $(this).text(num.replace(/\B(?=(\d{3})+(?!\d))/g, ","));
});

// 테이블 행 열기/닫기

var trFoldableTrigger = $(".tr-foldable-trigger");
var trFoldable = $(".tr-foldable");
trFoldableTrigger.on("click", function () {
    trFoldable.not($(this).next()).removeClass("active");
    $(this).next().toggleClass("active");
});

// 커스텀 셀렉트박스

if ($(".select-box > select").length > 0) {
    $(".select-box > select").niceSelect();
}

// 푸터 패밀리 사이트 링크

$(".family-site-link").niceSelect();
$(".family-site-link").on("change", function () {
    var url = $(this).val();
    if (url) {
        window.open(url, "_blank");
        $(this).closest("div").find(".nice-select li").removeClass("selected");
        $(this).closest("div").find(".nice-select .current").text("FAMILY SITE");
    }
    return false;
});

// 서브 탭 메뉴

var subTabBtn = $(".sub-tab__trigger .sub-tab__btn");
var subTabContent = $(".sub-tab__content");

subTabBtn.on("click", function (e) {
    e.preventDefault();
    var tabBtnIndex = $(this).index();
    subTabBtn.removeClass("current");
    $(this).addClass("current");
    subTabContent.removeClass("current");
    subTabContent.eq(tabBtnIndex).addClass("current");
});

// 서브 탭 메뉴 타입 2

var boxTabs = $(".boxTab__tabBtn");
var contents = $(".boxTab__content");

function resetboxTabs() {
    boxTabs.removeClass("current");
    contents.removeClass("current");
}

boxTabs.each(function (index) {
    $(this).on("click", function () {
        resetboxTabs();
        $(this).addClass("current");
        contents.eq(index).addClass("current");
    });
});

// 인풋 텍스트 숫자만 입력 (콤마 X, 휴대폰번호 등)
$(".input-text.number").on("input", function () {
    this.value = this.value.replace(/[^0-9]/g, "");
});

// 인풋 텍스트 숫자만 입력 (콤마 O, 금액 등)
$(".input-text.numberComma").on("input", function () {
    var input = $(this).val();
    $(this).val(input.replace(/[^0-9]/g, "").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
});

//해당 클래스를 가진 요소 3자리 마다 콤마
$(".comma").each(function () {
    var text = $(this).text();
    $(this).text(text.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,"));
});

// 모달 팝업 옵션

$.modal.defaults = {
    // 페이드 애니메이션
    fadeDuration: 70,

    // 우측 상단 닫기 버튼
    showClose: true,

    // 모달 안에 모달 열었을 때, 기존 모달 닫히지 않게 하기
    closeExisting: false,

    // 모달 바깥영역 클릭 시 닫히지 않게 하기
    clickClose: false,
};

// 모달에 띄울때, 레이아웃 움직이는 현상 수정

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

$(document).on($.modal.BEFORE_BLOCK, function (event, modal) {
    document.body.style.paddingRight = scrollbarWidth + "px";
});

$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    document.body.style.paddingRight = "";
});

// 데이트 피커
//
$(".datepicker").each(function () {
    $(this).datepicker({
        dateFormat: "yy-mm-dd",
        prevText: "이전 달",
        nextText: "다음 달",
        changeMonth: "true",
        changeYear: "true",
        dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
        dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"],
        monthNames: [
            "1월",
            "2월",
            "3월",
            "4월",
            "5월",
            "6월",
            "7월",
            "8월",
            "9월",
            "10월",
            "11월",
            "12월",
        ],
        monthNamesShort: [
            "1월",
            "2월",
            "3월",
            "4월",
            "5월",
            "6월",
            "7월",
            "8월",
            "9월",
            "10월",
            "11월",
            "12월",
        ],
        showMonthAfterYear: true,
        yearSuffix: "년",
        firstDay: 0,
        maxDate: 0, // 오늘로부터 1년 전까지의 날짜까지 선택 가능
        // beforeShowDay: function (date) {
        //     // 오늘로부터 1년 전까지의 날짜를 비활성화
        //     let currentDate = new Date();
        //     currentDate.setDate(currentDate.getDate() - 366);
        //     return [date.getTime() > currentDate.getTime() - 1, ""];
        // },
    });
});

// 기간 선택 탭버튼

var dateRangeBtn = $(".dateRange-btn");
dateRangeBtn.click(function (e) {
    if (e.detail === 0) {
        return;
    }

    e.preventDefault();
    var otherBtn = $(this).siblings();
    otherBtn.removeClass("selected");
    $(this).addClass("selected");
});

// 라디오 버튼 선택 시, 테이블 숨기기/보이기
//
var radioTab = $(".radio-tab-content");
var radioTabTrigger = $(".radio-tab-trigger > .custom-radio > input[type=radio]");
radioTab.children().hide();
radioTab.each(function () {
    $(this).children().eq(0).show();
});

radioTabTrigger.click(function () {
    if (!$(this).prop("checked")) {
        return;
    }
    // data-radiotab 값과 id같아야함
    var radioTabId = $(this).closest(".radio-tab-trigger").attr("data-radiotab");
    var radioTab = $("#" + radioTabId);
    radioTab.children().hide();
    // var index = $(this).closest(".custom-radio").index();
    var index = $(this)
        .closest(".radio-tab-trigger")
        .find(".custom-radio")
        .index($(this).closest(".custom-radio"));

    console.log(index);
    radioTab.children().eq(index).show();
});