import { ReactNode } from 'react'

import { ChildrenProp } from '../core'
import { IconProp } from '../icon'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'

export type AnimationDirection = 'fadeLeft' | 'fadeRight' | 'fadeIn'
export type TabsSize = 'md' | 'sm' | 'lg' | 'xl' | 'xxl'
export type NavBarIconSize = 'md' | 'xs' | 'sm' | 'lg' | 'xl' | undefined

export type TabsProps = SystemProps &
  ThemingProps<'Tabs'> &
  ChildrenProp & {
    actions?: ReactNode
    activeTabId?: number | string
    showBorder?: boolean
    onTabClick?: (id?: number | string) => void
  }

export type TabProps = SystemProps &
  ChildrenProp & {
    icon?: IconProp
    id?: number | string
    title: ReactNode
    disabled?: boolean
    className?: string
    onClick?: (nativeEvent?: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
    /** If provided, displays a remove button with this function as onClick. */
    onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
  }

export type TabIndexProps = TabProps & {
  index?: number
}

export type TabNavBarProps = {
  actions?: ReactNode
  tabs: TabIndexProps[]
  onNavItemClick: (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
  activeNavItem?: number | string
  animationDirection?: AnimationDirection
  showBorder?: boolean
  size?: TabsSize
}
