/*
  eslint-disable no-unused-vars
*/

const isMobile = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )

// ui tabs
const tabs = document.querySelectorAll('.ui-tabs__tab')
const tabCollection = document.querySelectorAll('.ui-tabs__body-item')

function addActiveClass(arr, i, className) {
  for (const el of arr) {
    el.classList.remove(className)
  } // eslint-disable-line
  arr[i].classList.add(className)
}

function uiTabsHandler(arr, className) {
  arr.forEach((item, index) => {
    item.addEventListener('click', (e) => {
      for (const el of arr) {
        el.classList.remove(className)
      } // eslint-disable-line
      e.currentTarget.classList.add(className)
      addActiveClass(tabCollection, index, 'ui-tabs__body-item--active')
    })
  })
}

uiTabsHandler(tabs, 'ui-tabs__tab--active')

function handleTabsModal() {
  const modal = document.querySelector('.ui-modal')
  if (!modal) {
    return
  }
  const modalOpener = document.querySelector('.ui-tabs__dropdown')
  const modalOpenerButtonTextContainer = modalOpener.getElementsByClassName(
    'tops-top-operators-by-states__dropdown-text'
  )[0]
  const states = document.querySelectorAll('.ui-modal__content .btn')

  function closeModal() {
    document.body.style.overflow = 'auto'
    modal.classList.remove('ui-modal--active')
  }

  states.forEach((item, index) => {
    item.addEventListener('click', (e) => {
      modalOpenerButtonTextContainer.innerText = e.target
        .closest('button')
        .getElementsByClassName(
          'tops-top-operators-by-states__dropdown-text'
        )[0].innerText
      addActiveClass(tabCollection, index, 'ui-tabs__body-item--active')
      closeModal()
    })
  })

  modalOpener.addEventListener('click', () => {
    document.body.style.overflow = 'hidden'
    modal.classList.add('ui-modal--active')
  })

  modal.addEventListener('click', (e) => {
    if (e.target.classList.contains('ui-modal')) {
      closeModal()
    }
  })
}

handleTabsModal()

// lazy imgs

const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target
      lazyImage.src = lazyImage.dataset.url
    }
  })
})

const arr = document.querySelectorAll('img[data-url]')
arr.forEach((img) => {
  imageObserver.observe(img)
})

// bg observer

const bgObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target
      lazyImage.style.backgroundImage = `${lazyImage.style.backgroundImage}, url(${lazyImage.dataset.bg})`
    }
  })
})

const articlesCollection = document.querySelectorAll('[data-bg]')

articlesCollection.forEach((bg) => {
  bgObserver.observe(bg)
})

// Latest Promotion Campaigns
const faqCollection = document.querySelectorAll('.accordion__item')

function togglePanel() {
  const panels = document.querySelectorAll(
    '.promotion-campaigns-block__row'
  )
  panels.forEach((item) => {
    item.addEventListener('click', (e) => {
      const target = e.currentTarget
      const arrow = target.querySelector('.promotion-campaigns-block__toggle')
      arrow.classList.toggle('promotion-campaigns-block__toggle--active')
      target.nextElementSibling.style.display = target.nextElementSibling.style.display === 'none' ? 'block' : 'none'
    })
  })
}

function toggleFAQFolded(folders) {
  folders.forEach((item) => {
    item.addEventListener('click', (e) => {
      e.currentTarget
        .querySelector('.accordion__descr')
        .classList.toggle('accordion__descr--shown')
      e.currentTarget
        .querySelector('.accordion__arrow')
        .classList.toggle('accordion__arrow--active')
    })
  })
}

togglePanel()
toggleFAQFolded(faqCollection)

// Slots pages
// Demo play
;(() => {
  const slotsPlayPreviewButton = document.getElementById(
    'slot-play-preview-play-button'
  )
  if (slotsPlayPreviewButton) {
    slotsPlayPreviewButton.addEventListener('click', () => {
      const agreement = document.getElementById('slot-play-agreement')
      const preview = document.getElementById('slot-play-preview')

      agreement.style.display = 'block'
      preview.style.display = 'none'
    })
    document
      .getElementById('slot-play-agreement-confirm-button')
      .addEventListener('click', () => {
        const agreement = document.getElementById('slot-play-agreement')
        const gameIframe = document.createElement('iframe')
        const parent = agreement.closest('.slot-card__demo')
        gameIframe.className = 'slot-card__demo-container'
        gameIframe.src = parent.dataset.src
        gameIframe.width = '100%'
        gameIframe.height = '300px'

        agreement.style.display = 'none'
        parent.appendChild(gameIframe)
      })
  }
})()

// Top Operators Sidebar
;(() => {
  const getPromotionValueByType = (value, type) => {
    if (['No_Deposit_Bonus', 'Free_Bet', 'Odds_Boost'].indexOf(type) > -1) {
      return `${value} free`
    }
    return `${value} bonus`
  }
  const getDepositNeededString = (type) => {
    if (['No_Deposit_Bonus', 'Free_Bet', 'Odds_Boost'].indexOf(type) > -1) {
      return 'no deposit needed'
    }
    if (['Risk_Free_Bet'].indexOf(type) > -1) {
      return 'risk free bet'
    }
    return 'on your first deposit'
  }

  const sidebar = document.getElementById('operators-top-sidebar')
  if (sidebar) {
    const apiUrl = `${sidebar.dataset.serviceApiUrl}/top3`
    fetch(apiUrl)
      .then((response) => response.json())
      .then((promotions) => {
        const loader = document.getElementById('operators-top-sidebar-loader')
        loader.style.display = 'none'
        const ul = document.createElement('ul')
        ul.className = 'ui-list'
        promotions.forEach((promo) => {
          // List Element
          const li = document.createElement('li')
          li.className = 'ui-list-item'
          // Link Container
          const link = document.createElement('a')
          link.href = `https://go.casinotalk.com/${promo.slug}/` // TODO: Replace with ENV variable
          link.rel = 'nofollow'
          link.target = '_blank'
          link.className = 'ui-list-item__content'
          // Container
          const container = document.createElement('div')
          container.className = 'tops-top-operators-sidebar__item'
          // Logo
          const logoContainer = document.createElement('div')
          logoContainer.className = 'tops-top-operators-sidebar__logo'
          const logoImg = document.createElement('img')
          const cdnUrl = `https://ik.imagekit.io/spixler/tr:w-100,q-integer:80,f-auto${
            new URL(promo.operator.logo.url).pathname
          }` // TODO: Replace with ENV variable
          logoImg.src = cdnUrl
          logoContainer.appendChild(logoImg)
          container.appendChild(logoContainer)
          // Operator Info
          const operatorContainer = document.createElement('div')
          operatorContainer.className = 'tops-top-operators-sidebar__info'
          // Operator Name
          const operatorName = document.createElement('p')
          operatorName.innerText = promo.operator.name
          operatorContainer.appendChild(operatorName)
          // Bonus Text
          const bonusText = document.createElement('h5')
          bonusText.innerText = `${getPromotionValueByType(
            promo.promotion_value,
            promo.type
          )} ${getDepositNeededString(promo.type)}`
          operatorContainer.appendChild(bonusText)
          container.appendChild(operatorContainer)

          link.appendChild(container)
          li.appendChild(link)
          ul.appendChild(li)
        })
        const block = document.getElementById('operators-top-sidebar-items')
        block.appendChild(ul)
        block.style.display = 'block'
      })
  }
})()

// Slots Search Page
;(() => {
  const filter = document.getElementById('slots-filter')
  if (filter) {
    filter.addEventListener('change', (event) => {
      const { value } = event.target
      // document.location.href = `/slots/?software-provider=${value}`
      document.location.href = `/free-slots/?software-provider=${value}`
    })
  }
})()

// Promocodes
function clipboard(string, event) {
  if (string === 'NONE NEEDED' || !string) return
  const element = event.target
  const input = document.createElement('input')
  input.value = string
  element.appendChild(input)
  input.select()
  document.execCommand('copy')
  input.remove()
}

// Header
;(() => {
  const header = document.getElementById('main-header')
  const burger = document.getElementById('burger')
  const headerActiveClassName = 'main-header--sticky'
  const burgerActiveClassName = 'burger--active'
  const oddsTickerPanel = document.querySelector('.main-menu__desktop-odds')

  window.addEventListener('scroll', () => {
    if (window.scrollY > 20) {
      header.classList.add(headerActiveClassName)
      burger.classList.add(burgerActiveClassName)
      if (oddsTickerPanel) {
        oddsTickerPanel.style.display = 'none'
      }
    } else {
      header.classList.remove(headerActiveClassName)
      burger.classList.remove(burgerActiveClassName)
      if (oddsTickerPanel) {
        oddsTickerPanel.style.display = 'flex'
      }
    }
  })
})()

// map
const map = document.querySelector('[data-states]')
const mapContainer = document.querySelector('.states-map')

function wrapState(node, onlineSportBetting, className, mapLink) {
  const container = document.createElementNS('http://www.w3.org/2000/svg', 'a')
  const nodeClone = node.cloneNode(true)
  container.setAttributeNS(
    null,
    'href',
    `${mapLink}/${onlineSportBetting.abbreviation}/`
  )
  container.setAttributeNS(null, 'target', '_PARENT')
  container.setAttributeNS(null, 'class', className)
  container.appendChild(nodeClone)
  node.parentElement.replaceChild(container, node)
}

function handleMapStates() {
  if (!map) return

  const mapLink = document.querySelector('[data-map-links]').dataset.mapLinks
  const states = JSON.parse(map.dataset.states)

  ;[...mapContainer.querySelectorAll('[id]')].forEach((node) => {
    const hasStateOptions = states.some(
      (item) => 'state_gambling_options' in item
    )
    if (hasStateOptions) {
      const options = [
        { label: 'Online Sports Betting', key: 'online-sport-betting' },
        { label: 'Sports Betting', key: 'sport-betting' },
        { label: 'Expected action', key: 'action' }
      ]
      for (let idx = 0; idx < options.length; idx += 1) {
        const option = options[idx]
        const found = states.find(
          (item) =>
            item.abbreviation.toUpperCase() === node.id &&
            item.state_gambling_options.includes(option.label)
        )
        if (found) {
          wrapState(node, found, option.key, mapLink)
          break
        }
      }
    } else {
      const statesList = states.find(
        (item) => item.abbreviation.toUpperCase() === node.id
      )

      if (statesList) {
        wrapState(node, statesList, 'online-sports-betting', mapLink)
      }
    }
  })
}

handleMapStates()

function tooltipHandler() {
  const tooltips = document.querySelectorAll('[data-tooltip]')

  if (!tooltips.length) return

  function removeTooltip() {
    const elemToRemove = document.querySelector('.tooltip')

    if (elemToRemove) {
      elemToRemove.parentNode.removeChild(elemToRemove)
      document.removeEventListener('scroll', removeTooltip)
    }
  }

  function getDimensions(item) {
    const { x } = item.getBoundingClientRect()
    const { y } = item.getBoundingClientRect()
    const { width } = item.getBoundingClientRect()
    const { tooltip } = item.dataset

    return {
      x,
      y,
      width,
      tooltip
    }
  }

  function createTooltip(x, y, elWidth, text) {
    if (!text && text === '') return null
    const OFFSET_SIZE = 45
    const tooltip = document.createElement('div')
    tooltip.classList.add('tooltip')
    tooltip.textContent = text
    tooltip.setAttribute(
      'style',
      `left: ${x + elWidth / 2}px; top: ${y + OFFSET_SIZE}px`
    )
    document.addEventListener('scroll', removeTooltip)

    return tooltip
  }

  tooltips.forEach((item) => {
    item.addEventListener('mouseenter', () => {
      const { x, y, width, tooltip } = getDimensions(item)
      document.body.append(createTooltip(x, y, width, tooltip))
    })

    item.addEventListener('mouseleave', () => {
      removeTooltip()
    })
  })
}

tooltipHandler()

// Betting picks block
function handleBettingPicksFilter(event) {
  const current = event.target
  const type = current.dataset.value
  const items = document.getElementsByClassName('picks-list-item')
  for (let itemIdx = 0; itemIdx < items.length; itemIdx += 1) {
    const item = items[itemIdx]
    item.style.display = 'block'
    if (type.length > 0 && type !== item.dataset.type) {
      item.style.display = 'none'
    }
    const parent = item.closest('.picks-main-section__item')
    parent.style.display = 'block'
    if (
      Array.from(parent.getElementsByClassName('picks-list-item')).filter(
        (e) => e.style.display === 'block'
      ).length === 0
    ) {
      parent.style.display = 'none'
    }
  }
  const buttons = current.parentNode.getElementsByClassName('btn')
  for (let btnIdx = 0; btnIdx < buttons.length; btnIdx += 1) {
    const btn = buttons[btnIdx]
    btn.classList.remove('btn--active')
    btn.classList.remove('btn--disabled')
  }
  current.classList.add('btn--active')
  current.classList.add('btn--disabled')
}

// Betting Picks Opener
const handleBettingPicksToggle = () => {
  const items = document.getElementsByClassName('picks-list-item__row')
  if (items.length > 0) {
    for (let idx = 0; idx < items.length; idx += 1) {
      const item = items[idx]
      item.addEventListener('click', () => {
        const parent = item.closest('.picks-list-item')
        const content = parent.getElementsByClassName(
          'picks-list-item__content'
        )[0]
        const arrow = parent.querySelector('.picks-list-item__toggle')
        arrow.classList.toggle('picks-list-item__toggle--active')
        content.style.display =
          content.style.display === 'none' ? 'block': 'none'
      })
    }
  }
}

handleBettingPicksToggle()

// Top promotions sidebar toggler
;(() => {
  const sidebarsToggleButtons = document.getElementsByClassName(
    'tops-top-operators-sidebar__toggle'
  )
  if (sidebarsToggleButtons.length > 0) {
    for (let idx = 0; idx < sidebarsToggleButtons.length; idx += 1) {
      sidebarsToggleButtons[idx].addEventListener('click', (event) => {
        const btn = event.target
        const activeClassName = 'tops-top-operators-sidebar__toggle--active'
        btn.classList.toggle(activeClassName)
        const contentContainer = btn
          .closest('.tops-top-operators-sidebar')
          .getElementsByClassName('tops-top-operators-sidebar__descr')[0]
        contentContainer.style.display =
          contentContainer.style.display === 'none' ? 'block' : 'none'
      })
    }
  }
})()

// Videos
const handlePlayVideo = (event) => {
  const parent = event.target.closest('.content-video')
  parent.getElementsByClassName('content-video__thumbnail')[0].remove()
  const iframe = document.createElement('iframe')
  iframe.className = 'content-video__iframe'
  iframe.src = parent.dataset.src
  iframe.frameBorder = 0
  iframe.width = '100%'
  iframe.height = '414'
  iframe.allow =
    'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
  iframe.allowfullscreen = true
  parent.appendChild(iframe)
}

// Odds ticker
const oddsSelect = document.querySelector('.ui-select')
const mobileOddsDropdown = document.querySelector(
  '.ui-drawer__mobile .ui-select'
)

function handleOddsTicker(type, items) {
  for (let i = 0; i < items.length; i += 1) {
    const item = items[i]
    item.style.display = 'block'
    item.parentElement.previousElementSibling.style.display = 'block'
    if (type.length > 0 && type !== item.dataset.oddsLeague) {
      item.style.display = 'none'
      item.parentElement.previousElementSibling.style.display = 'none'
    }
  }
}

if (oddsSelect) {
  oddsSelect.addEventListener('change', (e) => {
    const type = e.target.value
    const items = document.querySelectorAll('.odds-match')

    handleOddsTicker(type, items)
  })
}

if (mobileOddsDropdown) {
  mobileOddsDropdown.addEventListener('change', (e) => {
    const type = e.target.value
    const container = document.body.querySelector('.ui-drawer__mobile')
    const items = container.querySelectorAll('.odds-match')

    handleOddsTicker(type, items)
  })
}
;(() => {
  const oddsToggler = document.querySelector('.main-menu__odds')
  const oddsDrawer = document.querySelector('.ui-drawer')
  const drawerOverlay = document.querySelector('.ui-drawer__overlay')

  if (oddsToggler) {
    oddsToggler.addEventListener('click', () => {
      oddsDrawer.classList.add('ui-drawer--open')
      document.body.style.overflow = 'hidden'
    })
  }

  if (drawerOverlay) {
    drawerOverlay.addEventListener('click', () => {
      oddsDrawer.classList.remove('ui-drawer--open')
      document.body.style.overflow = 'auto'
    })
  }

  const scrollingRamp = document.querySelector('.odds-ticker__list')
  const leftArrow = document.querySelector('.odds-ticker__scroller--left')
  const rightArrow = document.querySelector('.odds-ticker__scroller--right')

  const handleOddsScroll = (direction, timeout = 25) => {
    let scrollAmount = 0
    const slideTimer = setInterval(() => {
      if (direction === 'left') {
        scrollingRamp.scrollLeft -= 10
      } else {
        scrollingRamp.scrollLeft += 10
      }
      scrollAmount += 10
      if (scrollAmount >= 100) {
        window.clearInterval(slideTimer)
      }
    }, timeout)
  }

  if (leftArrow) {
    leftArrow.addEventListener('click', () => {
      handleOddsScroll('left')
    })
  }

  if (rightArrow) {
    rightArrow.addEventListener('click', () => {
      handleOddsScroll('right')
    })
  }
})()

// table of content
;(() => {
  const wrapper = document.querySelector('.table-of-content-trigger')
  const tableOfContent = document.querySelector('.table-of-content')

  const activeClass = 'table-of-content--sticky'

  if (wrapper && tableOfContent) {
    window.addEventListener('scroll', () => {
      const tableCoord = wrapper.getBoundingClientRect().y
      const isSticky = tableCoord <= 70
      // eslint-disable-next-line no-unused-expressions
      isSticky
        ? tableOfContent.classList.add(activeClass)
        : tableOfContent.classList.remove(activeClass)
    })
  }
})()

// Show embeddted tweets
;(() => {
  const tweetIds = document.querySelectorAll('[data-tweetid]')
  tweetIds.forEach((ele) => {
    const tweetId = ele.dataset.tweetid
    twttr.widgets.createTweet(
      tweetId,
      document.getElementById('tweet-' + tweetId)
    );
  })
})()

//perform Search operation, search bar
const searchInput = document.getElementById('search-input')
const searchButton = document.getElementById('search-button')

//is browser smaller than 1153px than hide searchInput and searchButton
if (window.innerWidth < 1153) {
  if (searchInput) {
    searchInput.style.display = 'none'
  }
  if (searchButton) {
    searchButton.style.display = 'none'
  }
}

//perform Search mobile
const searchInputMobile = document.getElementById('mobile-search-input')
const searchButtonMobile = document.getElementById('mobile-search-button')

const locales = ['br', 'cl', 'se', 'pe']; // add all your locales here

function getLocaleFromUrl() {
  const pathSegments = window.location.pathname.split('/');
  for (let i = 0; i < pathSegments.length; i++) {
    if (locales.includes(pathSegments[i])) {
      return pathSegments[i];
    }
  }
  return 'en'; // default to 'en' if no locale is found
}


if (searchButtonMobile) {
  searchButtonMobile.addEventListener('click', () => {
    const searchValue = searchInputMobile.value
    const locale = getLocaleFromUrl();
    if (searchValue && locale !== 'en') {
      window.location.href = `/${locale}/search/${searchValue}`
      // empty the search input
      searchInputMobile.value = ''
    } else {
      window.location.href = `/search/${searchValue}`
      // empty the search input
      searchInput.value = ''
    }
  })
}

if (searchButton) {
  searchButton.addEventListener('click', () => {
    const searchValue = searchInput.value
    const locale = getLocaleFromUrl();
    if (searchValue && locale !== 'en') {
      window.location.href = `/${locale}/search/${searchValue}`
      // empty the search input
      searchInput.value = ''
    } else {
      window.location.href = `/search/${searchValue}`
      // empty the search input
      searchInput.value = ''
    }
  })
}

//perform Search on Enter key press
if (searchInput) {
  searchInput.addEventListener('keyup', (event) => {
    if (event.keyCode === 13) {
      const searchValue = searchInput.value
      const locale = getLocaleFromUrl();
      if (searchValue && locale !== 'en') {
        window.location.href = `/${locale}/search/${searchValue}`
        // empty the search input
        searchInput.value = ''
      } else {
        window.location.href = `/search/${searchValue}`
        // empty the search input
        searchInput.value = ''
    }
    }
  })
}

// Datalayer Event 
window.addEventListener('click', (event) => {
  // Get the closest 'A' tag from the clicked element
  const el = event.target.closest('A')
  const closestBtn = event.target.closest('.btn')

  // Check if the clicked element is a link
  if (el && el.tagName === 'A') {
    const href = el.getAttribute('href')

    // Check if the link is external
    if (href.startsWith('http://') || href.startsWith('https://')) {
      // Extract part of the link and the link text
      const urlPart = href.split('/')[3] // Adjust this as needed
      const linkText = closestBtn ? closestBtn.textContent : ''; // Use textContent as a property, not a method

      console.log('Link clicked:', urlPart, linkText)

      // Push an event to the DataLayer
      window.dataLayer = window.dataLayer || []
      window.dataLayer.push({
        event: 'outclick',
        event_category: 'Outbound Click',
        aff_url: href,
        aff_clicktype: linkText,
        aff_name: urlPart
      })
    }
  }
})

// Compliance Popover Hero
const compliancePopoverTitle = document.querySelector('.promotion-campaigns-block__compliance_title_hero')
const compliancePopover = document.querySelector('.compliance-popover-hero')

// Popover Promotion Campaigns
const promotionCampaigns = document.querySelectorAll('.promotion-campaigns-block__compliance_title_block')
const promotionCampaignsPopover = document.querySelector('.compliance-popover-block')

// Function to add hover event listeners
function addHoverListeners() {
  // on hover show compliance popover
  if (compliancePopoverTitle) {
    compliancePopoverTitle.addEventListener('mouseenter', () => {
      compliancePopover.style.display = 'block'
    })

    compliancePopoverTitle.addEventListener('mouseleave', () => {
      compliancePopover.style.display = 'none'
    })
  }

  // on hover show compliance popover
  if (promotionCampaigns.length > 0) {
    promotionCampaigns.forEach((campaign) => {
      campaign.addEventListener('mouseenter', () => {
        promotionCampaignsPopover.style.display = 'block'
      })

      campaign.addEventListener('mouseleave', () => {
        promotionCampaignsPopover.style.display = 'none'
      })
    })
  }
}

// Function to remove hover event listeners
function removeHoverListeners() {
  // Remove event listeners for compliance popover
  if (compliancePopoverTitle) {
    compliancePopoverTitle.removeEventListener('mouseenter', () => {
      compliancePopover.style.display = 'block'
    })

    compliancePopoverTitle.removeEventListener('mouseleave', () => {
      compliancePopover.style.display = 'none'
    })
  }

  // Remove event listeners for promotion campaigns popover
  if (promotionCampaigns.length > 0) {
    promotionCampaigns.forEach((campaign) => {
      campaign.removeEventListener('mouseenter', () => {
        promotionCampaignsPopover.style.display = 'block'
      })

      campaign.removeEventListener('mouseleave', () => {
        promotionCampaignsPopover.style.display = 'none'
      })
    })
  }
}

// Check screen width and add/remove event listeners accordingly
function handleResize() {
  if (window.innerWidth > 768) {
    addHoverListeners()
  } else {
    removeHoverListeners()
  }
}

// Initial check
handleResize()

// Add resize event listener
window.addEventListener('resize', handleResize)