import React, { useCallback, useRef } from 'react'
import { ColumnWithLooseAccessor } from 'react-table'

import { concat } from '../../../utils'
import { useReportWidth } from '../../hooks'
import { useColumnWidths } from '../../providers/ColumnWidthsProvider'
import { useTable } from '../../providers/TableProvider'

type Props<R extends object> = {
  columns: Array<ColumnWithLooseAccessor<R>>
}
export default function MeasureRow<R extends object>({ columns }: Props<R>) {
  const { prefix: tablePrefix } = useTable()
  const prefix = concat(tablePrefix, 'measure-row')
  const bodyPrefix = concat(tablePrefix, 'body')
  const ref = useRef<HTMLTableRowElement>(null)

  return (
    <tr className={prefix} ref={ref} style={{ height: '0' }}>
      {
        columns
          .map(column => (
            <MeasureCell
              prefix={bodyPrefix}
              key={column.id!}
              colId={column.id!}
            />
          ))
      }
    </tr>
  )
}

type MeasureCellProps = {
  prefix: string
  colId: string
}

function MeasureCell({ prefix, colId }: MeasureCellProps) {
  const ref = useRef<HTMLTableCellElement>(null)
  const { reportBodyCellWidth } = useColumnWidths()

  useReportWidth(
    ref,
    useCallback(nextWidth => {
      if (nextWidth === 0) return
      reportBodyCellWidth(colId, nextWidth)
    }, [colId, reportBodyCellWidth])
  )

  return <td ref={ref} className={concat(prefix, 'td')} key={colId} />
}