import { ReactText } from 'react'

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

export type ListProps = SystemProps &
  ThemingProps<'List'> & {
    /** Deprecated. @deprecated  */
    colorScheme?: 'blue' | 'grey'
    /** Socket displaying a heading above the items. */
    heading?: React.ReactNode
    /** Passed to all nested items to make them interactive. */
    isInteractive?: boolean
    /** Socket displaying a list of items. */
    items?: PropsOf<'li', ListItemProps>[] | JSX.Element
    /** Socket for the variant. The 'blue' variant is internal, used in the header. */
    variant?: 'default' | 'ordered' | 'unordered' | 'blue'
  }

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

export type ListItemProps = SystemProps &
  ThemingProps<'List'> & {
    /** Centers the content vertically and horizontally. @deprecated */
    center?: boolean
    /** Centers the content horizontally. @deprecated */
    centerH?: boolean
    /** Centers the content vertically. @deprecated */
    centerV?: boolean
    /** Deprecated. @deprecated  */
    colorScheme?: 'blue' | 'grey'
    /** Displays content in a column. @deprecated */
    column?: boolean
    /** Displays item and its content in disabled state with appropriate styling. */
    disabled?: boolean
    /** Socket displaying an icon on the left. */
    iconLeft?: IconProp | JSX.Element
    /** Socket displaying an icon on the right. */
    iconRight?: IconProp | JSX.Element
    /** Makes item clickable and focusable with appropriate styling. */
    isInteractive?: boolean
    /** Displays item in selected state with appropriate styling. */
    isSelected?: boolean
    /** Socket displaying a custom item on the left. */
    itemLeft?: React.ReactNode
    /** Socket displaying a custom item on the right. */
    itemRight?: React.ReactNode
    /** If provided, content is wrapper with a link and the props are provided to the element. */
    linkProps?: ListItemLinkProps
    /** Socket displaying text within the item. */
    text?: ReactText | JSX.Element
  }
