import React from 'react'
import { cn } from '../../../utils'
import { ExpandedFooterContext, FooterConfigContext } from '../context'
import { Category } from './Category'

type Props = {
  disableScrollOnExpand?: boolean
}
export function ExpandedFooter({ disableScrollOnExpand }: Props) {
  const { expandedConfig } = React.useContext(FooterConfigContext)
  const { expanded } = React.useContext(ExpandedFooterContext)

  const ref = React.useRef<HTMLDivElement>(null)
  React.useEffect(() => {
    if (!disableScrollOnExpand && expanded) {
      ref.current?.scrollIntoView({ behavior: 'smooth' })
    }
  }, [expanded])

  return (
    <div
      ref={ref}
      className={cn(
        'footer-expanded overflow-hidden',
        // Only animate when collapsing (when expanded is false)
        !expanded && 'transition-all duration-300 ease-in-out',
        expanded
          ? 'max-h-[calc(100vh-var(--page-header-height))] overflow-y-auto'
          : 'max-h-0',
      )}
    >
      <div className="grid grid-cols-1 gap-10 bg-background p-6 md:p-10 lg:grid-cols-4">
        {Object.entries(expandedConfig).map(([label, items]) => (
          <Category key={label} label={label} items={items} />
        ))}
      </div>
    </div>
  )
}