import { useRef } from 'react'

import { useScrollInToView } from './useScrollInToView'

export const useFilterRefs = (selectedFilter: string | boolean) => {
  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
  const panelRef = useRef<HTMLDivElement | null>(null)
  const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
  const filtersRef = useRef<HTMLDivElement | null>(null)

  const { isMobile, tabsRef } = useScrollInToView({ selectedFilter })

  return {
    previouslyFocusedButtonRef,
    isMobile,
    tabsRef,
    panelRef,
    buttonRefs,
    filtersRef,
  }
}