import React from 'react'
import { ColumnWithLooseAccessor } from 'react-table'

import { useColumnWidths } from './providers/ColumnWidthsProvider'
import { useScrollbarWidth } from './providers/ScrollbarWidthProvider'
import { useTable } from './providers/TableProvider'

type Props<R extends object> = {
  columns: Array<ColumnWithLooseAccessor<R>>
  // 考虑并解决滚动条的宽度问题
  considerScrollbar?: boolean
}

export default function Colgroup<R extends object>({ columns, considerScrollbar = false }: Props<R>) {
  const { fixHead } = useTable()
  const { colWidths } = useColumnWidths()
  const { width: scrollbarWidth } = useScrollbarWidth()
  return (
    <colgroup>
      {columns.map((column, idx) => {
        // fixHead 用真实宽度，否则用配置里的宽度
        let width: number | string | undefined
        if (fixHead) {
          let _width = colWidths[column.id!]
          if (typeof _width === 'number') {
            if (considerScrollbar === true && idx === columns.length - 1) {
              // 最后一个 th 加上滚动条的宽度
              _width += scrollbarWidth
            }
            width = _width + 'px'
          } else {
            width = _width
          }
        } else {
          width = column.width
        }
        return <col key={column.id} style={{ width }} />
      })}
    </colgroup>
  )
}