// Based on react-scroll-sync implementation, but only syncs horizontal scroll.
const onScroll = (
  scrolledElement: HTMLDivElement | null,
  otherElement: HTMLDivElement | null,
) => {
  if (!scrolledElement || !otherElement) {
    return
  }

  if (otherElement.scrollLeft !== scrolledElement.scrollLeft) {
    otherElement.scrollLeft = scrolledElement.scrollLeft
  }
}

export const addScrollEvent = (
  element: HTMLDivElement | null,
  otherElement: HTMLDivElement | null,
) => {
  let ignoreScroll = false
  if (element && otherElement) {
    element.onscroll = () => {
      if (!ignoreScroll) {
        onScroll(element, otherElement)
        ignoreScroll = true
      } else {
        ignoreScroll = false
      }
    }

    otherElement.onscroll = () => {
      if (!ignoreScroll) {
        onScroll(otherElement, element)
        ignoreScroll = true
      } else {
        ignoreScroll = false
      }
    }
  }
}

export const removeScrollEvent = (element: HTMLDivElement | null) => {
  if (element) {
    element.onscroll = null
  }
}