import React, { TableHTMLAttributes } from 'react'
import { ColumnWithLooseAccessor, HeaderGroup } from 'react-table'

import { concat } from '../utils'
import Colgroup from './Colgroup'
import { useHorizontalScroll } from './providers/HorizontalScrollProvider'
import { useTable } from './providers/TableProvider'

export type Props<R extends object> = {
  columns: Array<ColumnWithLooseAccessor<R>>
  headerGroups: Array<HeaderGroup<R>>
  tableHtmlProps?: TableHTMLAttributes<HTMLTableElement>
  cellClassName?: string
}

export default function THead<R extends object>(props: Props<R>) {
  const { columns, headerGroups, tableHtmlProps, cellClassName } = props
  const { prefix, fixHead } = useTable()
  const { registerHeadDom } = useHorizontalScroll()
  const headerPrefix = concat(prefix, 'header')

  function renderHeadRow() {
    return headerGroups.map(headerGroup => (
      // eslint-disable-next-line react/jsx-key
      <tr {...headerGroup.getHeaderGroupProps({ className: concat(headerPrefix, 'tr') })}>
        {headerGroup.headers.map((column, idx) => column.render('Header', {
          isLast: idx === headerGroup.headers.length - 1,
          key: column.id,
          index: idx,
          className: cellClassName
        }))}
      </tr>
    ))
  }

  if (fixHead) {
    return (
      <div ref={registerHeadDom} className={headerPrefix}>
        <table {...tableHtmlProps}>
          <Colgroup columns={columns} considerScrollbar />
          <thead>
            {renderHeadRow()}
          </thead>
        </table>
      </div>
    )
  }

  return (
    <thead className={headerPrefix}>
      {renderHeadRow()}
    </thead>
  )
}