let officeSwiper = null

function isMobile() {
  return /iPhone|Android|Mobile/i.test(navigator.userAgent)
}

function initSwiper() {
  const officeCards = document.querySelector('.office-cards')

  if (officeCards) {
    if (!isMobile()) officeCards.classList.add('swiper-no-swiping')

    const swiperOptions = isMobile() ? { autoplay: true, loop: true } : {}

    officeSwiper = new Swiper(
      officeCards,
      Object.assign({ speed: 1000 }, swiperOptions)
    )
  }
}

function registerMapLocations() {
  /** @type {HTMLDivElement} */
  const officeContainer = document.querySelector('.office-container')
  /** @type {HTMLDivElement} */
  const locationContainer = document.querySelector('.location-container')

  if (officeContainer && locationContainer) {
    /** @type {HTMLDivElement} */
    const officeCards = officeContainer.querySelector('.office-cards')

    if (officeCards && locationContainer) {
      const handleLocationToggle = async function () {
        const slideList = officeCards.querySelectorAll('.swiper-slide')

        for (let i = 0; i < slideList.length; i++) {
          await new Promise((resolve, reject) => {
            const timer = setTimeout(() => {
              const dotGroup = document.createElement('div')
              const city = slideList[i].dataset?.city || ''
              dotGroup.className =
                i === 0 && !isMobile() ? 'dot-container current' : 'dot-container'
              dotGroup.dataset.city = city
              dotGroup.dataset.index = i
              dotGroup.innerHTML = `
                <div class="dot-name">${city}</div>
                <div class="dot-group">
                  <div class="dot"></div>
                  <div class="dot"></div>
                  <div class="dot"></div>
                  <div class="dot"></div>
                </div>
                <div class="ring-group">
                  <div class="ring"></div>
                  <div class="ring"></div>
                  <div class="ring"></div>
                  <div class="ring"></div>
                </div>
              `
              locationContainer.appendChild(dotGroup)

              resolve()
              clearTimeout(timer)
            }, 100)
          })
        }

        const handleMouseEvent = function () {
          initSwiper()

          const dotContainerList =
            locationContainer.querySelectorAll('.dot-container')

          const resetState = function () {
            dotContainerList.forEach((item) => item.classList.remove('current'))
          }

          dotContainerList.forEach((item) => {
            const index = item.dataset.index || 0
            const switchSlide = () => officeSwiper?.slideTo(index)

            item.addEventListener('click', function () {
              resetState()
              this.classList.add('current')
              switchSlide()
            })
          })
        }

        handleMouseEvent()
      }

      const handleResize = function () {
        const background = document.querySelector('.office-background')
        if (background) {
          const resizeObserver = new ResizeObserver(() => {
            const style = window.getComputedStyle(locationContainer),
              right = style.getPropertyValue('--right').replace(/[^\d.]/g, ''),
              width = style.getPropertyValue('--width').replace(/[^\d.]/g, ''),
              ratio = background.getBoundingClientRect().width / 1920

            locationContainer.style.setProperty('right', `${right * ratio}px`)
            locationContainer.style.setProperty('width', `${width * ratio}px`)
          })

          resizeObserver.observe(background)
        }
      }

      handleLocationToggle()

      if (!isMobile()) handleResize()
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  registerMapLocations()
})