import React, { CSSProperties, HTMLAttributes, ReactNode, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react'
import cns from 'classnames'

import { ComponentSize, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'

export type RawTableProps = {
  /** 内容 */
  children?: ReactNode
  /** 尺寸 */
  size?: ComponentSize
  /**
   * 边框配置
   * + `full` - 全边框
   * + `row` - 行与行之间才有边框
   * + `none` - 无边框
   */
  border?: 'row' | 'full' | 'none'
  /** 是否有斑马纹；若有斑马纹则 `border` 总是会被视作 `none` */
  zebra?: boolean
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: TableHTMLAttributes<HTMLTableElement>
}
export type RawTheadProps = {
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: HTMLAttributes<HTMLTableSectionElement>
}
export type RawTbodyProps = {
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: HTMLAttributes<HTMLTableSectionElement>
}
export type RawTfootProps = {
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: HTMLAttributes<HTMLTableSectionElement>
}
export type RawTrProps = {
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: HTMLAttributes<HTMLTableRowElement>
}
export type RawThProps = {
  /** 同 HTML attribute `colspan` */
  colSpan?: number
  /** 同 HTML attribute `rowspan` */
  rowSpan?: number
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: ThHTMLAttributes<HTMLTableHeaderCellElement>
}
export type RawTdProps = {
  /** 同 HTML attribute `colspan` */
  colSpan?: number
  /** 同 HTML attribute `rowspan` */
  rowSpan?: number
  /** 内容 */
  children?: ReactNode
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 根元素的 html 属性 */
  rootHtmlProps?: TdHTMLAttributes<HTMLTableDataCellElement>
}

export function RawTable({
  children,
  size = 'default',
  border = 'row',
  zebra = false,
  className,
  style,
  rootHtmlProps
}: RawTableProps) {
  const tableClz = usePrefix('raw-table')

  if (zebra) border = 'none'

  className = cns(
    tableClz,
    concat(tableClz, 'border', border),
    zebra && concat(tableClz, 'zebra'),
    concat(tableClz, 'size', size),
    rootHtmlProps?.className
  )
  return <table {...rootHtmlProps} className={className} style={style}>{children}</table>
}

export function RawThead({ rootHtmlProps, ...extraProps }: RawTheadProps) {
  return <thead {...rootHtmlProps} {...extraProps} />
}

export function RawTbody({ rootHtmlProps, ...extraProps }: RawTbodyProps) {
  return <tbody {...rootHtmlProps} {...extraProps} />
}

export function RawTfoot({ rootHtmlProps, ...extraProps }: RawTfootProps) {
  return <tfoot {...rootHtmlProps} {...extraProps} />
}

export function RawTr({ rootHtmlProps, ...extraProps }: RawTrProps) {
  return <tr {...rootHtmlProps} {...extraProps} />
}

export function RawTh({ rootHtmlProps, ...extraProps }: RawThProps) {
  return <th {...rootHtmlProps} {...extraProps} />
}

export function RawTd({ rootHtmlProps, ...extraProps }: RawTdProps) {
  return <td {...rootHtmlProps} {...extraProps} />
}