import { useEffect, useRef, useState } from 'react'

type Props = {
  selectedFilter: string | boolean
}

export const useScrollInToView = ({ selectedFilter }: Props) => {
  const [isMobile, setIsMobile] = useState(true)
  const tabsRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
    if (typeof window !== 'undefined' && window.innerWidth > 960) {
      setIsMobile(false)
      return
    }

    if (tabsRef.current && selectedFilter) {
      window.scrollTo({
        behavior: 'smooth',
        top:
          tabsRef.current.getBoundingClientRect().top -
          document.body.getBoundingClientRect().top -
          30,
      })
    }
  }, [selectedFilter])

  return { isMobile, tabsRef }
}