import { useSearchParams } from 'react-router-dom'
import { useBreadcrumb } from '../../hooks/useBreadcrumb'
import { breadcrumbConfig } from '../../config/breadcrumbConfig'
import GalleryGroupLanding from '../../components/paid-content/GalleryGroupLanding'
import GalleryTimeline from '../../components/paid-content/GalleryTimeline'

export default function Gallery() {
  useBreadcrumb(breadcrumbConfig['/paid-content/gallery'])
  const [searchParams, setSearchParams] = useSearchParams()
  const groupParam = searchParams.get('group')
  const groupId = groupParam !== null ? parseInt(groupParam, 10) : null

  const handleSelectGroup = (id: number) => {
    setSearchParams({ group: String(id) })
  }

  const handleBack = () => {
    setSearchParams({})
  }

  if (groupId !== null && !isNaN(groupId)) {
    return <GalleryTimeline groupId={groupId} onBack={handleBack} />
  }

  return <GalleryGroupLanding onSelectGroup={handleSelectGroup} />
}
