import { ColumnWithLooseAccessor } from 'react-table'

import Header from './Header'
import Cell from './Cell'
import { TableInternalColumnOptions } from './types'
import { ComponentSize } from '../ConfigProvider'
import { getNumberWidthByPx, getPaddingBySize } from './utils'

export function createRtColumn<R extends object>(
  column: TableInternalColumnOptions<R>,
  index: number,
  tableSize: ComponentSize
): ColumnWithLooseAccessor<R> {
  const { id, width } = column

  const accessor = ('accessor' in column ? column.accessor : undefined) as any

  // // maxWidth: 给了 width 的 column 不再 grow
  // const widthOptions = width != null ? { width, maxWidth: width } : {}

  // 计算和缓存rowSpan=0的情况
  const rowSpans: number[] = []

  return {
    id: id ?? `column-index-${index}`,
    accessor,
    Header,
    Cell,
    width: getCompatibleWidth(width ?? 'auto', tableSize),
    meta: { ...column, rowSpans }
  }
}

// <col /> 设置的宽度是带上 padding 的
function getCompatibleWidth(width: string, tableSize: ComponentSize): string {
  if (width != null && /^\d+px$/.test(width)) {
    // col 宽度是 borderBox 的，width 目前是 content width
    // 如果是 px 则追加 padding，如果是 % 先不管
    return getNumberWidthByPx(width) + getPaddingBySize(tableSize)[1] * 2 + 'px'
  }

  return width
}