import { ReactNode } from 'react'

import { IconProps } from '../icon'
import { SystemProps } from '../system'
import { ThemingProps } from '../theme'
import { Sort } from '../utils'
import { UseTableReturnType } from './useTable'
import { UseTableProps } from './useTable.types'

export type TableColumn<T = string> = SystemProps & {
  /** Unique identifier of a column. */
  field: T
  /** Adds content and styling related to sort. */
  isSortable?: boolean
  /** Displays given text inside the element. */
  title?: string
  //** Min width */
  minW?: string | number
  //** Width */
  w?: string | number
}

export type TableContext = Pick<TableProps, 'columns' | 'rows' | 'size' | 'stickyColumn' | 'stickyHeader' | 'variant'> &
  UseTableReturnType

export type TableProps = SystemProps &
  UseTableProps &
  ThemingProps<'Table'> & {
    /** Data structure describing the columns. */
    columns?: TableColumn[] | readonly TableColumn[]
    /** Data structure describing the rows and their cells. */
    rows?: any[]
    /** First column will be sticky when scrolling horizontally. */
    stickyColumn?: boolean
    /** Table head will be sticky when scrolling vertically. */
    stickyHeader?: boolean
  }

export type TbodyProps = SystemProps

export type TdProps = SystemProps & {
  level?: number
}

export type TfootProps = SystemProps

export type ThProps = SystemProps &
  Partial<TableColumn> & {
    /** Adds disabled styling. */
    disabled?: boolean
    /** Adds interactive styling. */
    isInteractive?: boolean
  }

export type TheadProps = SystemProps & {}

export type TrProps = SystemProps & {
  /** Adds selected styling. */
  isExpanded?: boolean
  isSelected?: boolean
  nested?: ReactNode
  onCollapsed?: () => void
  onExpanded?: () => void
}

export type TableSortIconProps = Omit<IconProps, 'order'> & {
  /** Sort order which controls the icon. */
  order?: Sort['order']
}
