const clickEvents = () => {
  // data-class
  document.querySelectorAll('.js-toggle-class').forEach(function (item) {
    item.addEventListener('click', function (e) {
      const el = e.currentTarget
      const toggle = this.dataset.class

      if (el.classList.contains(toggle)) {
        el.classList.remove(toggle)
      } else {
        el.classList.add(toggle)
      }
    })
  })

  // Handler that uses various data-* attributes to trigger
  // specific actions, mimicing bootstraps attributes
  // const triggers = Array.from(
  //   document.querySelectorAll('[data-toggle="collapse"]')
  // )

  // window.addEventListener(
  //   'click',
  //   (ev) => {
  //     const elm = ev.target
  //     if (triggers.includes(elm)) {
  //       const selector = elm.getAttribute('data-target')
  //       collapse(selector, 'toggle')
  //     }
  //   },
  //   false
  // )

  // const fnmap = {
  //   toggle: 'toggle',
  //   show: 'add',
  //   hide: 'remove',
  // }
  // const collapse = (selector, cmd) => {
  //   const target = document.querySelector(selector).nextSibling
  //   console.log(target)
  //   target.classList[fnmap[cmd]]('show')
  // }

  document.querySelectorAll('.js-scroll-to').forEach(function (item) {
    item.addEventListener('click', function (e) {
      let o = e.currentTarget
      if (o.getAttribute('href').indexOf('#') !== -1) {
        e.preventDefault()
        let scope = document.querySelector(o.getAttribute('href'))
        let offset =
          scope.offsetTop > $(window).scrollTop()
            ? scope.offsetTop - 64
            : scope.offsetTop - 142

        window.scrollTo({
          top: offset,
          behavior: 'smooth',
        })
      }
    })
  })
  // data-class
  // data-remove-class
  // data-dom
  document
    .querySelectorAll('.js-toggle-element-class')
    .forEach(function (item) {
      item.addEventListener('click', function () {
        const toggle = this.dataset.class
        const remove = this.dataset.removeClass

        document.querySelectorAll(this.dataset.dom).forEach(function (el) {
          try {
            // remove all class start width
            const prefix = remove.split('*')[0]
            const classes = el.className
              .split(' ')
              .filter((c) => !c.startsWith(prefix))
            el.className = classes.join(' ').trim()
          } catch (error) {
            el.classList.remove(remove)
          }

          if (el.classList.contains(toggle)) {
            el.classList.remove(toggle)
          } else {
            el.classList.add(toggle)
          }
        })
      })
    })

  // data-target
  // data-tab

  // 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, slider.slick())
  //     slider.slick('slickGoTo', n)
  //     //nav
  //     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')
  //       }
  //     })

  //     //tab
  //     tab.querySelectorAll('.tab-pane').forEach(function (el) {
  //       // el.classList.remove('active')

  //       if (el.getAttribute('id') === target) {
  //         el.classList.add('active')
  //       } else {
  //         el.classList.remove('active')
  //       }
  //     })
  //   })
  // })
}

export { clickEvents }
