import { useContext, useState } from 'react'
import { FormContext } from './Form.js'
import { Tabs } from '../Tabs/index.js'

type FormTabsProps = {}

function FormTabs(_: FormTabsProps) {
  const ctx = useContext(FormContext)

  if (!ctx) {
    throw new Error('missing form context')
  }

  const { groups, activeGroup, setActiveGroup } = ctx

  if (!groups) return null

  return (
    <Tabs
      value={activeGroup}
      onChange={setActiveGroup}
      tabs={[
        { label: 'All', value: '__all' },
        ...groups.map((group) => ({ label: group.label, value: group.label })),
      ]}
    />
  )
}

export { FormTabs }
export type { FormTabsProps }
