import { useEffect } from 'react'

type Props = {
  showFeedback?: boolean
}

export const useCalendarTooltips = ({ showFeedback }: Props) =>
  useEffect(() => {
    if (typeof document === 'undefined' || !showFeedback) return

    // Children
    const calendarTooltip = document.querySelector('.will-calendar-tooltip')
    const calendarTooltipCheckOut = document.querySelector(
      '.will-calendar-tooltip-check-out'
    )

    const calendarTooltipOverlappingDate = document.querySelector(
      '.will-calendar-tooltip-overlapping-date'
    )

    const loadingSpinner = document.querySelector(
      '.will-filter-bar-calendar .will-calendar-spinner'
    )

    const calendarTooltipCheckInOnly = document.querySelector(
      '.will-calendar-tooltip-check-in-only'
    )
    const calendarTooltipCheckOutOnly = document.querySelector(
      '.will-calendar-tooltip-check-out-only'
    )

    // Parents
    const calendarButtons = document.querySelectorAll(
      '.will-filter-bar-calendar .rdp-cell:has(.booked):not(:has(.disabled-after-check-in))'
    )
    const calendarButtonsCheckOut = document.querySelectorAll(
      '.will-filter-bar-calendar .rdp-cell:has(.booked.disabled-after-check-in)'
    )
    const calendarMonthContainer = document.querySelector(
      '.will-filter-bar-calendar .rdp-months'
    )
    const calendarOverlappingDate = document.querySelectorAll(
      '.will-filter-bar-calendar .rdp-cell:has(.overlapping-date)'
    )

    const calendarCheckInOnly = document.querySelectorAll(
      '.will-filter-bar-calendar .rdp-cell:has(.check-in-only)'
    )

    const calendarCheckOutOnly = document.querySelectorAll(
      '.will-filter-bar-calendar .rdp-cell:has(.check-out-only)'
    )

    // Append children to parents

    const tooltipClonesCheckIn: Element[] = []
    const tooltipClonesCheckOut: Element[] = []
    const tooltipClonesCheckInOnly: Element[] = []
    const tooltipClonesCheckOutOnly: Element[] = []
    const tooltipClonesSpinner: Element[] = []
    const tooltipClonesOverlappingDates: Element[] = []

    if (calendarTooltip && calendarButtons.length > 0) {
      calendarButtons.forEach((element) => {
        const tooltipClone: Element = calendarTooltip.cloneNode(true) as Element
        element.appendChild(tooltipClone)
        tooltipClonesCheckIn.push(tooltipClone)
      })
    }

    if (calendarTooltipCheckOut && calendarButtonsCheckOut.length > 0) {
      calendarButtonsCheckOut.forEach((element) => {
        const tooltipClone: Element = calendarTooltipCheckOut.cloneNode(
          true
        ) as Element
        element.appendChild(tooltipClone)
        tooltipClonesCheckOut.push(tooltipClone)
      })
    }

    if (calendarTooltipCheckOutOnly && calendarCheckOutOnly.length > 0) {
      calendarCheckOutOnly.forEach((element) => {
        const tooltipClone: Element = calendarTooltipCheckOutOnly.cloneNode(
          true
        ) as Element
        element.appendChild(tooltipClone)
        tooltipClonesCheckOutOnly.push(tooltipClone)
      })
    }

    if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
      calendarCheckInOnly.forEach((element) => {
        const tooltipClone: Element = calendarTooltipCheckInOnly.cloneNode(
          true
        ) as Element
        element.appendChild(tooltipClone)
        tooltipClonesCheckInOnly.push(tooltipClone)
      })
    }

    if (loadingSpinner && calendarMonthContainer) {
      const tooltipClone: Element = loadingSpinner.cloneNode(true) as Element
      calendarMonthContainer.appendChild(tooltipClone)
      tooltipClonesSpinner.push(tooltipClone)
    }

    if (calendarTooltipOverlappingDate && calendarOverlappingDate.length > 0) {
      calendarOverlappingDate.forEach((element) => {
        const tooltipClone: Element = calendarTooltipOverlappingDate.cloneNode(
          true
        ) as Element
        element.appendChild(tooltipClone)
        tooltipClonesOverlappingDates.push(tooltipClone)
      })
    }

    return () => {
      tooltipClonesCheckIn.forEach((clone) => clone.remove())
      tooltipClonesCheckOut.forEach((clone) => clone.remove())
      tooltipClonesSpinner.forEach((clone) => clone.remove())
      tooltipClonesOverlappingDates.forEach((clone) => clone.remove())
      tooltipClonesCheckInOnly.forEach((clone) => clone.remove())
      tooltipClonesCheckOutOnly.forEach((clone) => clone.remove())
    }
  })