import React, { useRef, useContext } from 'react';
import classNames from 'classnames';
import { useTableKeyboardNavigation, TableKeyboardNavigationContext, getCellId } from '../hooks/use-table-keyboard-navigation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function HeaderCell({
  column,
  columnIndex
}) {
  const cellRef = useRef(null);
  const keyboardNavigationContext = useContext(TableKeyboardNavigationContext);
  keyboardNavigationContext?.registerCell({
    cellRef,
    cellRowIndex: -1,
    cellColumnIndex: columnIndex
  });
  const isCurrentCellFocused = keyboardNavigationContext?.focusedCell === getCellId({
    cellRowIndex: -1,
    cellColumnIndex: columnIndex
  });
  const a11yProps = {
    role: 'columnheader',
    tabIndex: columnIndex === 0 && !keyboardNavigationContext?.focusedCell || isCurrentCellFocused ? 0 : -1,
    onFocus: columnIndex === 0 && !keyboardNavigationContext?.focusedCell ? () => keyboardNavigationContext?.setFocusedCell(`-1-${columnIndex}`) : undefined
  };
  const columnDef = column;
  if (columnDef?.label) {
    return /*#__PURE__*/_jsx("th", {
      ref: cellRef,
      "test-id": columnDef.testId,
      className: columnDef.className,
      "aria-hidden": !columnDef.label,
      ...a11yProps,
      children: columnDef.label
    });
  }
  if (typeof column === 'function') {
    const thValue = column();
    return /*#__PURE__*/_jsx("th", {
      "aria-hidden": !thValue,
      ref: cellRef,
      ...a11yProps,
      children: /*#__PURE__*/React.cloneElement(thValue, {
        className: `${thValue.props.className || ''} th-header`.trim()
      })
    });
  }
  return /*#__PURE__*/_jsx("th", {
    "aria-hidden": !column,
    ref: cellRef,
    ...a11yProps,
    children: column
  });
}
function BodyCell({
  rowIndex,
  columnIndex,
  columnDef,
  children
}) {
  const cellRef = useRef(null);
  const keyboardNavigationContext = useContext(TableKeyboardNavigationContext);
  keyboardNavigationContext?.registerCell({
    cellRef,
    cellRowIndex: rowIndex,
    cellColumnIndex: columnIndex
  });
  const isCurrentCellFocused = keyboardNavigationContext?.focusedCell === getCellId({
    cellRowIndex: rowIndex,
    cellColumnIndex: columnIndex
  });
  return /*#__PURE__*/_jsx("td", {
    ref: cellRef,
    className: columnDef?.className,
    "test-id": columnDef?.testId,
    role: "gridcell",
    tabIndex: isCurrentCellFocused ? 0 : -1,
    children: children
  }, `tbody-td-${rowIndex}-${columnIndex}`);
}

/** A simplified table version for cases where we do not need complex
 *  interfaces Table component provides
 *  @midnight-gray-supported
 *  @alpine-light-supported
 */
export const SimpleTable = ({
  columns,
  data,
  className,
  testId,
  sublevel,
  tableAriaLabel
}) => {
  const tableRef = useRef(null);
  const keyboardNavigationContext = useTableKeyboardNavigation({
    tableRef,
    columnsCount: columns.length,
    rowsCount: data.length
  });
  return /*#__PURE__*/_jsx(TableKeyboardNavigationContext.Provider, {
    value: keyboardNavigationContext,
    children: /*#__PURE__*/_jsxs("table", {
      className: classNames('simple-table', className, {
        sublevel
      }),
      "test-id": testId,
      ref: tableRef,
      role: "grid",
      onKeyDown: keyboardNavigationContext.onTableKeyDownHandler,
      "aria-label": tableAriaLabel,
      children: [/*#__PURE__*/_jsx("thead", {
        children: /*#__PURE__*/_jsx("tr", {
          children: columns.map((column, columnIndex) => /*#__PURE__*/_jsx(HeaderCell, {
            column: column,
            columnIndex: columnIndex
          }, `thead-tr-${columnIndex}`))
        })
      }), /*#__PURE__*/_jsx("tbody", {
        children: data.map((row, rowIndex) => /*#__PURE__*/_jsx("tr", {
          role: "row",
          children: row.map((item, columnIndex) => {
            const isColumnObject = columns[columnIndex]?.label;
            const columnDef = isColumnObject ? columns[columnIndex] : undefined;
            return /*#__PURE__*/_jsx(BodyCell, {
              rowIndex: rowIndex,
              columnIndex: columnIndex,
              columnDef: columnDef,
              children: typeof item === 'function' ? item() : item
            }, `tbody-td-${rowIndex}-${columnIndex}`);
          })
        }, `tbody-tr-${rowIndex}`))
      })]
    })
  });
};