import { ReactNode, ReactText } from 'react'

import { IconProp } from '../icon'
import { LinkProps } from '../link'
import { ListItemProps } from '../list'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'
import { PropsOf } from '../utils'

export type TreeProps = SystemProps &
  ThemingProps<'Tree'> & {
    /** Currently selected item.  */
    activeItemId?: TreeItemId
    /** Socket defining the collapse icon on the left. */
    iconCollapse?: IconProp
    /** Socket defining the expand icon on the left. */
    iconExpand?: IconProp
    /** Socket displaying a tree of items. */
    items?: PropsOf<'li', TreeItemProps>[] | JSX.Element
    /** Socket defining the size of the tree. */
    onClickItem?: (id: TreeItemId) => void
  }

export type TreeItemLinkProps = PropsOf<'a', LinkProps> | object

export type TreeItemId = string | number

export type TreeOnToggleEvent = {
  id: TreeItemId
  collapsed: boolean
}

export type TreeItemProps = ListItemProps &
  ThemingProps<'Tree'> & {
    activeItemId?: TreeItemId
    /** internal, not exposed */
    activeItemIndex?: TreeItemId
    /** Unique ID */
    id: TreeItemId
    /** Centers the content vertically and horizontally. @deprecated */
    center?: boolean
    /** Centers the content horizontally. @deprecated */
    centerH?: boolean
    /** Centers the content vertically. @deprecated */
    centerV?: boolean
    /** Socket defining the collapse icon on the left. */
    iconCollapse?: IconProp
    /** Socket defining the expand icon on the left. */
    iconExpand?: IconProp
    /** The children of this tree item. */
    items?: PropsOf<'li', TreeItemProps>[]
    children?: ReactNode
    /** Collapsed state */
    isCollapsed?: boolean
    /** indicates if the item is first-level; if yes it can be styled differently */
    isFirstLevel?: boolean
    /** Displays item and its content in disabled state with appropriate styling. */
    disabled?: boolean
    /** Displays item in selected state with appropriate styling. */
    isActive?: boolean
    /** If provided, content is wrapper with a link and the props are provided to the element. */
    linkProps?: TreeItemLinkProps
    /** internal, padding left; if provided it will accumulate function of levels. */
    propagatedPL?: number
    /** Socket defining the size of the padding increment. */
    plUnit?: number
    /** Socket displaying text within the item. */
    text: ReactText | JSX.Element
    /** Collapse change state */
    onToggle?: (event: TreeOnToggleEvent) => void
    onClickTreeItem?: (id: TreeItemId) => void
  }
