import $ from 'jquery'
import slick from 'slick-carousel'
import scrollSpy from 'simple-scrollspy'
import { Select2 } from 'select2'
import tailwindConfig from '../../tailwind.config.js'

const common = () => {
  initMenu()
  initPageMenu()
  initSliders()
  addListenners()
  initSelect2()
  hideAxeptio()
  backToTop()
}

// BACK TO TOP
const backToTop = () => {
  $('#backtotop').on('click', function (event) {
    event.preventDefault()
    TweenLite.to(jQuery('html,body'), 1, {
      scrollTop: 0,
      ease: Expo.easeInOut,
    })
    return false
  })
}

const hideAxeptio = () => {
  window.addEventListener('scroll', () => {
    if (document.querySelector('.axeptio_mount')) {
      // console.log(document.body.offsetHeight, window.innerHeight)
      if (
        document.body.offsetHeight > window.innerHeight + 100 &&
        window.scrollY >= document.body.offsetHeight - window.innerHeight - 100
      ) {
        document.querySelector('.axeptio_mount').style.display = 'none'
      } else {
        document.querySelector('.axeptio_mount').style.display = 'block'
        document.querySelector('.axeptio_mount').style.position = 'fixed'
      }
    }
  })
}

const initSelect2 = () => {
  // $('select').select2()
  $('.select2').select2()
}

const addListenners = () => {
  $(window).on('resize', function () {
    let el = $('.slick-transversal-container')
    if (el.length > 0) {
      el.width($(window).width() - el.offset().left + 125)
    }
  })
  $(window).trigger('resize')

  // document.querySelectorAll('.nav-no-link').forEach(function (item) {
  //   item.addEventListener('click', function (e) {
  //     e.preventDefault()
  //   })
  // })
}

const initPageMenu = () => {
  if ($('.scrollspy').length > 0 && $('#page-menu').last().length > 0) {
    const options = {
      sectionClass: '.scrollspy', // Query selector to your sections
      menuActiveTarget: '.pagemenu-item', // Query selector to your elements that will be added `active` class
      offset: $(window).height() / 2, // Menu item will active before scroll to a matched section 100px
    }
    scrollSpy('#page-menu', options)
  }
}
const initMenu = () => {
  $('#newMenu > ul > li').each(function () {
    let sub = $(this).find('.sub-menu-wrap')
    if (sub.length > 0 && sub.offset().left + sub.width() > $(window).width()) {
      sub.addClass('right')
    } else {
      sub.remove('right')
    }
  })

  $("li[class*='current-']:not(.nav-no-link)")
    .parent()
    .parent()
    .parent()
    .addClass('current-menu-item')

  $('#newMenu > ul > li')
    .on('mouseenter', function () {
      if (
        window.innerWidth >=
        parseInt(tailwindConfig.theme.screens.lg.split('px')[0])
      ) {
        $(this).find('.sub-menu-wrap').addClass('open')
      }
    })
    .on('click', function () {
      if (
        window.innerWidth <
        parseInt(tailwindConfig.theme.screens.lg.split('px')[0])
      ) {
        let b = $(this).hasClass('open') ? true : false

        $('#newMenu > ul > li').removeClass('open')
        $('#newMenu > ul > li').find('.sub-menu-wrap').css('max-height', '0px')
        $('#newMenu > ul > li').find('.sub-menu-wrap').removeClass('open')

        if (!b) {
          $(this).addClass('open')
          $(this).find('.sub-menu-wrap').addClass('open')
          $(this)
            .find('.sub-menu-wrap')
            .css(
              'max-height',
              `${
                $(this).find('.sub-menu')[0].getBoundingClientRect().height + 55
              }px`
            )

          // force open the menu
          setTimeout(() => {
            $(this)
              .find('.sub-menu-wrap')
              .css(
                'max-height',
                `${
                  $(this).find('.sub-menu')[0].getBoundingClientRect().height +
                  55
                }px`
              )
          }, 500)
        }
      }
    })
    .on('mouseleave', function () {
      if (
        window.innerWidth >=
        parseInt(tailwindConfig.theme.screens.lg.split('px')[0])
      ) {
        $(this).find('.sub-menu-wrap').removeClass('open')
      }
    })

  let $oldScroll = $(window).scrollTop()
  $(window).on('scroll', function () {
    if ($(window).scrollTop() > 200 && $(window).scrollTop() > $oldScroll) {
      $('body').addClass('scrolled')
    } else {
      $('body').removeClass('scrolled')
    }
    $oldScroll = $(window).scrollTop()
  })
}

const initSliders = () => {
  $('.slick-iterations').slick({
    dots: false,
    arrows: false,
    slidesToShow: 1,
    infinite: false,
    autoplay: false,
    swipe: false,
    touchMove: false,
    centerMode: true,
    centerPadding: '0px',
    adaptiveHeight: true,
  })

  document.querySelectorAll('.js-tab').forEach(function (item) {
    item.addEventListener('click', function (e) {
      const tab = document.getElementById(this.dataset.tab)
      const target = this.dataset.target
      const n = this.dataset.number
      let slider = $(tab).find('.slick-iterations')
      console.log(slider, n)
      slider.slick('slickGoTo', n)
      tab.querySelectorAll('.nav-link').forEach(function (el) {
        el.classList.remove('active')
        if (el.dataset.target === target) {
          el.classList.add('active')
        } else {
          el.classList.remove('active')
        }
      })
    })
  })

  $('.slick-insta').slick({
    dots: false,
    arrows: false,
    slidesToShow: 6,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 4000,
  })

  $('.slick-figures').slick({
    dots: true,
    arrows: false,
    slidesToShow: 1,
    infinite: true,
    fade: true,
    autoplay: true,
    // adaptiveHeight: true,
    autoplaySpeed: 4000,
  })
  $('.slick-galerie').slick({
    dots: false,
    arrows: true,
    slidesToShow: 3,
    infinite: true,
    prevArrow:
      '<button type="button" class="slick-prev"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.29255 12L7.70752 10.585L3.12253 6L7.70752 1.41502L6.29255 1.23701e-07L0.292549 6L6.29255 12Z" fill="black"/></svg></button>',
    nextArrow:
      '<button type="button" class="slick-next"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.70745 0L3.29248 1.41502L7.87747 6L3.29248 10.585L4.70745 12L10.7075 6L4.70745 0Z" fill="black"/></svg></button>',
    responsive: [
      {
        breakpoint: 1900,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 1600,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  })

  $('.slick-transversal').slick({
    arrows: true,
    slidesToShow: 4,
    // variableWidth: true,
    slidesToScroll: 1,
    // infinite: true,

    prevArrow: $('.slick-transversal-prev'),
    nextArrow: $('.slick-transversal-next'),
    // autoplay: true,
    // autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 1600,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 1023,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  })
  $('.slick-video-grid').slick({
    slidesToShow: 1,
    dots: true,
    arrows: false,
    infinite: true,
  })

  if ($(window).width() < 768) {
    setTimeout(() => {
      if ($('.slick-video-grid .slick-active .video-element').length > 0) {
        $('.slick-video-grid .slick-active .video-element')[0].play()
      }
    }, 100)
  }

  $('.slick-video-grid').on('init', function (event, slick) {})

  $('.slick-video-grid').on(
    'afterChange',
    function (event, slick, currentSlide, nextSlide) {
      $('.slick-video-grid .video-element').each(function () {
        this.pause()
      })
      $('.slick-video-grid .slick-active .video-element')[0].play()
    }
  )

  $('.slick-video-grid .video-element').on('ended', function (event) {
    $('.slick-video-grid').slick('slickNext')
  })

  $('.slick-transversal-v2').slick({
    arrows: true,
    slidesToShow: 6,
    // variableWidth: true,
    slidesToScroll: 1,
    infinite: false,
    prevArrow: $('.slick-transversal-prev'),
    nextArrow: $('.slick-transversal-next'),
    // autoplay: true,
    // autoplaySpeed: 2000,
    responsive: [
      {
        breakpoint: 1600,
        settings: {
          slidesToShow: 6,
        },
      },
      {
        breakpoint: 1400,
        settings: {
          slidesToShow: 5,
        },
      },
      {
        breakpoint: 1023,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  })

  var $containerWidth = $('.container').width()
  var $w = $(window).width() - ($(window).width() - $containerWidth) / 2
  if ($(window).width() > 768) {
    var $w = $(window).width() - ($(window).width() - $containerWidth) / 2
  } else {
    var $w = $(window).width() - ($(window).width() - $containerWidth) / 2 - 10
  }
  $('.slick-transversal-v2-container').css('width', $w)

  $('.slick-carrousel-labels').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    // speed: 0,
    easing: 'none',
    asNavFor: '.slick-carrousel',
  })

  $('.slick-carrousel').slick({
    centerMode: true,
    centerPadding: '0px',
    slidesToShow: 5,
    prevArrow:
      '<button type="button" class="slick-prev"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.29255 12L7.70752 10.585L3.12253 6L7.70752 1.41502L6.29255 1.23701e-07L0.292549 6L6.29255 12Z" fill="black"/></svg></button>',
    nextArrow:
      '<button type="button" class="slick-next"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.70745 0L3.29248 1.41502L7.87747 6L3.29248 10.585L4.70745 12L10.7075 6L4.70745 0Z" fill="black"/></svg></button>',
    arrows: true,
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: true,
    asNavFor: '.slick-carrousel-labels',
    responsive: [
      {
        breakpoint: 1023,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 3,
        },
      },
    ],
  })
}

export { common }
