import React, { ReactNode, TableHTMLAttributes, useRef } from 'react'
import { ColumnWithLooseAccessor, Row, TableBodyProps } from 'react-table'
import classnames from 'classnames'

import { concat } from '../utils'
import { useScrollBar } from './hooks'
import Colgroup from './Colgroup'

import MeasureRow from './rows/Measure'
import Placeholder from './rows/Placeholder'
import { useScrollbarWidth } from './providers/ScrollbarWidthProvider'
import { useTable } from './providers/TableProvider'
import { TableProps } from './types'
import { useColumnWidths } from './providers/ColumnWidthsProvider'
import { useHorizontalScroll } from './providers/HorizontalScrollProvider'
import { useRefs } from '../utils/hooks'

type Props<R extends object> = {
  // 列配置信息
  columns: Array<ColumnWithLooseAccessor<R>>
  // 要渲染的 rows
  rows: Array<Row<R>>
  records: R[]
  prepareRow: (row: Row<R>) => void
  bodyProps: TableBodyProps
  empty: ReactNode
  tableHtmlProps?: TableHTMLAttributes<HTMLTableElement>
  getRowClassName: TableProps<R>['getRowClassName']
  cellClassName?: string
  onRowClick: TableProps<R>['onRowClick']
}

export default function TBody<R extends object>(props: Props<R>) {
  const {
    columns, rows, prepareRow, empty, records, bodyProps, tableHtmlProps, getRowClassName, cellClassName, onRowClick
  } = props
  const { prefix: tablePrefix, fixHead } = useTable()
  const { colWidths } = useColumnWidths()
  const { registerBodyDom } = useHorizontalScroll()
  const bodyPrefix = concat(tablePrefix, 'body')
  const bodyRef = useRef<HTMLDivElement>(null)
  const bodyRefs = useRefs<HTMLDivElement>(bodyRef, registerBodyDom)

  useScrollBar(bodyRef, useScrollbarWidth().setWidth)

  function renderMeasureRow() {
    if (rows.length > 0) {
      return (
        <MeasureRow<R>
          key={-1}
          columns={columns}
        />
      )
    }
  }
  function renderBodyRow() {
    return rows.map((row, rowIndex) => {
      prepareRow(row)

      return (
        // eslint-disable-next-line react/jsx-key
        <tr {...row.getRowProps({ className: classnames(concat(bodyPrefix, 'tr'), getRowClassName?.(row.original, rowIndex)) })}
          onClick={
            () => onRowClick && onRowClick(records[rowIndex], rowIndex)
          }
        >
          {row.cells.map((cell, index) => cell.render('Cell', {
            key: cell.column.id,
            colWidths,
            className: cellClassName,
            index
          }))}
        </tr>
      )
    })
  }
  function renderPlaceholderRow() {
    return records.length === 0 && <Placeholder colSpan={columns.length} empty={empty} />
  }

  if (fixHead) {
    return (
      <div ref={bodyRefs} className={bodyPrefix}>
        <table {...tableHtmlProps}>
          <Colgroup columns={columns} />
          <tbody {...bodyProps}>
            {renderMeasureRow()}
            {renderBodyRow()}
            {renderPlaceholderRow()}
          </tbody>
        </table>
      </div>
    )
  }

  return (
    <tbody className={bodyPrefix} {...bodyProps}>
      {renderBodyRow()}
      {renderPlaceholderRow()}
    </tbody>
  )
}