import { PropsWithChildren, RefObject, useRef } from 'react'
import cx from 'classnames'

import { CategoryContent } from '@/lib/types'
import { useBreakpoint, useScrollFromTop } from '@/lib/hooks'

type Props = PropsWithChildren & {
  contentRef: RefObject<HTMLDivElement>
  introHeight: number
  pageCategories: CategoryContent[]
  isContentExpanded: boolean
}

export default function GlossaryFaqLeftPanel({ children, isContentExpanded }: Props) {
  const { isMobile } = useBreakpoint()
  const refTop = useRef<HTMLDivElement>(null)
  const refBottom = useRef<HTMLDivElement>(null)
  const isScrolledIntoView = useScrollFromTop(refTop, 100)
  const isScrolledOutOfView = useScrollFromTop(refBottom, 900)

  return (
    <>
      <div ref={refTop} className="absolute top-0"></div>
      <div
        className={`${isScrolledIntoView && !isScrolledOutOfView && !isMobile ? 'fixed top-[120px]' : ''} ${
          isScrolledOutOfView && !isMobile ? 'absolute bottom-[100px]' : ''
        }`}
      >
        {children}
      </div>

      <div className="absolute bottom-0" ref={refBottom}></div>
      <div
        className={cx(
          'absolute inset-y-0 left-1/2 w-vw -translate-x-1/2 bg-white transition-all duration-300 -z-1 ease-in-out-cubic',
          isContentExpanded ? 'sm:w-vw' : 'sm:w-full'
        )}
      />
    </>
  )
}