Banner

// TODO: Arrows: Should be a global utility
export const bannerArrows = () => {

  const svgRightArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
  </svg>`

  const links = document.querySelectorAll('.uol-banner__item__link')

  links.forEach( (item) => {
    const innerTextArray = item.innerText.trim().split(' ')

    // Wrap last word and svg in no-wrap span to avoid wrapping
    item.innerHTML = '<span role="text">' + innerTextArray.slice(0, -1).join(' ') + ' <span class="no-wrap">' + innerTextArray[innerTextArray.length - 1] + '' + svgRightArrow + '</span><span>'
  })
}


export const bannerCarousel = () => {

  const banners = document.querySelectorAll('.uol-banner--multiple')

  banners.forEach((banner) => {
    const container = banner.closest('.uol-banner-container')
    const items = banner.querySelectorAll('.uol-banner__item')

    // Create Previous button
    const buttonPrev = document.createElement('button')
    buttonPrev.type = 'button'
    buttonPrev.innerText = 'Select previous banner item'
    buttonPrev.classList.add('uol-button')
    buttonPrev.classList.add('uol-button--bright')
    buttonPrev.classList.add('uol-icon')
    buttonPrev.classList.add('uol-icon--icon-only')
    buttonPrev.classList.add('uol-icon--mdiArrowLeft')
    buttonPrev.classList.add('uol-banner__button')
    buttonPrev.classList.add('uol-banner__button--prev')
    buttonPrev.disabled = true

    // Create Next button
    const buttonNext = document.createElement('button')
    buttonNext.type = 'button'
    buttonNext.innerText = 'Select next banner item'
    buttonNext.classList.add('uol-button')
    buttonNext.classList.add('uol-button--bright')
    buttonNext.classList.add('uol-icon')
    buttonNext.classList.add('uol-icon--icon-only')
    buttonNext.classList.add('uol-icon--mdiArrowRight')
    buttonNext.classList.add('uol-banner__button')
    buttonNext.classList.add('uol-banner__button--next')
    buttonNext.dataset.galleryModalTarget = 1

    // Append both buttons
    container.appendChild(buttonPrev)
    container.appendChild(buttonNext)

    // Append skip link

    const skipLink = document.createElement('a')
    skipLink.classList.add('uol-skip-link')
    skipLink.setAttribute('href', '#main')
    skipLink.innerText = 'Skip carousel'
    banner.insertAdjacentElement('beforebegin', skipLink)


    // Create counter
    const counter = document.createElement('span')
    counter.classList.add('uol-banner__counter')
    counter.setAttribute('role', 'status')
    counter.innerHTML = `
      <span role="text">
        <span class="hide-accessible">Item </span>
        <span class="uol-banner__counter__current">1</span>
        <span class="hide-accessible"> of </span>
        <span class="uol-banner__counter__total">${items.length}</span>
      </span>
    `

    // Append counter
    container.appendChild(counter)

    // Remove tabindex from scrollable container - not needed when JS enabled
    banner.removeAttribute('tabindex')

    // Get counter current so we can update it on scroll
    const countContainer = container.querySelector('.uol-banner__counter__current')

    // Fade out all but first
    items.forEach((item) => {
      item.classList.add('uol-banner__item--unfocused')
    })
    items[0].classList.remove('uol-banner__item--unfocused')

    let isScrolling = null;

    banner.addEventListener('scroll', () => {

      let bannerWidth = banner.clientWidth

      window.clearTimeout( isScrolling )

      isScrolling = setTimeout(() => {

        items.forEach((item, itemIndex) => {
          let itemLeft = item.getBoundingClientRect().x
          if (!itemLeft) // Handle IE11
              itemLeft = item.getBoundingClientRect().left


          // If item is more than half in view
          if (itemLeft >= -10 && itemLeft < (bannerWidth / 2) ) {
              // Remove unfocused class
              item.classList.remove('uol-banner__item--unfocused')

              // Update the current counter
              countContainer.innerText = itemIndex + 1

              // Update buttons
              if (itemIndex == 0) {
                  buttonNext.disabled = false
                  if (document.activeElement === buttonPrev) {
                    buttonNext.focus()
                  }
                  buttonPrev.disabled = true
              } else if (itemIndex == items.length - 1 ) {
                  buttonPrev.disabled = false
                  if (document.activeElement === buttonNext) {
                    buttonPrev.focus()
                  }
                  buttonNext.disabled = true
              } else {
                  buttonPrev.disabled = false
                  buttonNext.disabled = false
              }

              buttonPrev.dataset.galleryModalTarget = parseFloat(itemIndex) - 1
              buttonNext.dataset.galleryModalTarget = parseFloat(itemIndex) + 1
          } else {
            // Add unfocused class
            item.classList.add('uol-banner__item--unfocused')
          }
        })

      }, 100);
    })

    // Listen for button clicks
    container.querySelectorAll('.uol-banner__button').forEach( (navBtn) => {
      navBtn.addEventListener('click', () => {
        let targetItem = items[navBtn.dataset.galleryModalTarget]
        banner.scrollLeft = targetItem.offsetLeft
      })
    })

    // Scroll to item on link focus
    items.forEach( (item) => {
      const itemLink = item.querySelector('.uol-banner__item__link')
      if (itemLink) {
        itemLink.addEventListener('focus', () => {
          banner.scrollLeft = item.offsetLeft
        })
      }
    })

  })
}