// ==========================================================
//  手機版排序區塊
// ==========================================================
;(function($) {
  function sortStepCheck(jqElement, step, className) {
    if(step) {
      jqElement.addClass(className)
    } else {
      jqElement.removeClass(className)
    }
  }
  let sortStep = 0

  $('#Main_Content').on('click', '.select-title', function(e) {
    sortStep = (sortStep + 1) % 2

    sortStepCheck($(this).parents('.mobile-select'), sortStep, 'open-click')
  })

  $('#Main_Content').on('click', '.option-list-item', function(e) {
    const targetText = $(this).text()
    const targetValue = $(this).data('value')

    $(this).parents('.mobile-select').find('.select-title').text(targetText)
    sortStep = 0

    sortStepCheck($('.mobile-select'), sortStep, 'open-click')
    $('#orderbox').val(targetValue)
    console.log($('#orderbox').val())
  })
})($)




// ==========================================================
//  filter 開關
// ==========================================================
;(function($){
  let main = $("main")
  let body = $("body")
  $(document).on('click', '.filter-toggle', function(e) {
    if(main.hasClass("aside-open")){
      body.removeClass("overflow-hidden")
      main.removeClass("aside-open")
    }else{
      body.addClass("overflow-hidden")
      main.addClass("aside-open")
    }
  })
  $(document).on('click', '.aside-closer, .left-aside', function(e) {
    if($(e.target).closest(".aside-closer").length || $(e.target).hasClass("left-aside")){
      main.removeClass("aside-open")
      body.removeClass("overflow-hidden")
    }
  })
})($)


// ==========================================================
//  filter group 開關
// ==========================================================
;(function($) {
  $('#Main_Content').on('click', '.filter-title', function(e) {
    $(this).parents('.filter-group:not(.checked-group)').toggleClass('in-open');
  })
})($)






// ==========================================================
//  篩選器挑選功能
// ==========================================================
;(function($) {
  let deviceType = ''
  const filterArray = []

  function filterCount(array, selector) {
    const arrayAmount = array.length
    $(selector).text(arrayAmount)
  }

  function filterTags(array, wrapper, className) {
    $(wrapper).empty()

    array.forEach((item, i) => {
      const itemEle = `<li class="${className}"><span></span>${item}</li>`

      $(wrapper).append(itemEle)
    })
  }

  function tagCheck(array, value, jqElement, className) {
    const tagIndex = array.indexOf(value)

    if(tagIndex !== -1) {
      array.splice(tagIndex, 1)
      jqElement.removeClass(className)
    } else {
      array.push(value)
      jqElement.addClass(className)
    }
  }

  function checkedBox(array, selector) {
    const arrayAmount = array.length

    if(arrayAmount) {
      $(selector).slideDown(500)
    } else {
      $(selector).slideUp(500)
    }
  }

  $(window).on('resize', function(e) {
    if ($(this).outerWidth(true) > 1024 && deviceType !== 'desktop') {
      deviceType = 'desktop'
      $('.checked-group').removeAttr('style')
    } else if ($(this).outerWidth(true) <= 1024 && deviceType !== 'mobile') {
      deviceType = 'mobile'
      if (filterArray.length) {
        $('.checked-group').css({
          display: 'block',
        })
      }
    }
  })

  $('#Main_Content').on('click', '.filter-group:not(.checked-group) .filter-list-item', function(e) {
    const targetValue = $(this).data('value')

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item cleanItem')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.checked-group span', function(e) {
    const targetValue = $.trim($(this).parents('.filter-list-item').text())

    tagCheck(filterArray, targetValue, $(`[data-value="${targetValue}"]`), 'in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

  $('#Main_Content').on('click', '.filter-clearall', function(e) {
    filterArray.length = 0

    $('.filter-list-item').removeClass('in-check')
    filterCount(filterArray, '.filter-box span')
    filterTags(filterArray, '.checked-group .filter-list', 'filter-list-item')
    if (deviceType === 'mobile') {
      checkedBox(filterArray, '.checked-group')
    }
  })

})($)






// ==========================================================
//  條件搜尋按鈕
// ==========================================================
;(function($) {
  function log(obj) {
    console.log(obj)
  }

  $(window).on('scroll', function(e) {
    const $offsetStart = $('#Main_Content').offset().top + $('#topTitle').outerHeight() - $('.header-fixe').outerHeight()
    const $offsetEnd = $('.pager').offset().top - $(window).outerHeight(true) + $('.headerBottom').outerHeight()
    const $winWidth = $(window).outerWidth(true)

    if($winWidth <= 1024) {
      if ($(window).scrollTop() >= $offsetStart && $(window).scrollTop() <= $offsetEnd) {
        $('.mobile-scroll-button').fadeIn('500')
      } else {
        $('.mobile-scroll-button').fadeOut('150')
      }
    }

  })

  $(window).trigger('scroll')
})($)





// ==========================================================
//  快速購物跳窗
// ==========================================================
;(function($) {
    $('body').on('click', '.product-quickshop', function(e) {
      $(this).parents('.productBox').find('.quickshop-box').toggleClass('in-show');
    })
    $(document).on('click', '.product-quickshop-close', function(e) {
      $(this).parents('.productBox').find('.quickshop-box').toggleClass('in-show');
    })
})($)


// ==========================================================
//  顏色區塊開闔
// ==========================================================
;(function($) {
  $('body').on('click', '.item-switch', function(e) {
    e.preventDefault();
    $(this).parents('.color-list').toggleClass('in-full');
  })
  $('body').on('click', '.color-list-button', function(e) {
    e.preventDefault();

    if(!$(this).parents('.color-list-item').hasClass('item-switch')) {
      $(this).parents('.color-list-item').addClass('in-active')
            .siblings('.color-list-item').removeClass('in-active');
    }
  })

})($)