import { createContext, useContext } from 'react'

import { TabsType, IndicatorStyle } from '.'
import { ComponentSize } from '../ConfigProvider'
import { Tab, TabValue } from './types'

export type TabsContextValue<T extends TabValue> = {
  prefix: string
  size: ComponentSize
  type: TabsType
  indicatorStyle: IndicatorStyle
  tabs: Array<Tab<T>>
  // 如果没有 value 也没有 defaultValue，需要 rerender 拿到 第一个面板的 value
  value?: T
}

export const tabsContext = createContext<TabsContextValue<TabValue> | null>(null)

export function useTabs() {
  const context = useContext(tabsContext)
  if (context == null) {
    throw Error('TabPane should be used in Tabs.')
  }
  return context
}