import React from 'react';
import classNames from 'classnames';
// eslint-disable-next-line you-dont-need-lodash-underscore/get
import get from 'lodash-es/get';
import { LoadingIcon } from '../loading-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/** Custom table. */
function createComponent(compClass, displayName) {
  const comp = ({
    children,
    className,
    testId
  }) => /*#__PURE__*/_jsx("div", {
    className: classNames(compClass, className),
    "test-id": testId,
    children: children
  });
  comp.displayName = displayName;
  return comp;
}
export const THead = createComponent('r-thead', 'THead');
export const TBody = createComponent('r-tbody', 'TBody');
export const Tr = createComponent('r-tr', 'Tr');
export const Th = createComponent('r-th', 'Th');
export const Td = createComponent('r-td', 'Td');
function renderHeader(column, data, rowProps) {
  return typeof column.header === 'function' ? column.header(data, rowProps) : column.header;
}
function renderCell(column, item, index, rowProps) {
  return column.cell ? /*#__PURE__*/React.createElement(column.cell, {
    row: item,
    value: get(item, column?.accessor),
    index,
    accessor: column.accessor,
    ...rowProps
  }) : get(item, column?.accessor);
}

/** Advanced table component that supports custom layout
 * [CAPITALIZATION] Header must be in uppercase
 * @uxr-deprecated The component is deprecated for UXR, use TableReact instead
 */
const Table = /*#__PURE__*/React.forwardRef(({
  columns,
  data,
  className,
  tHeadProps = {},
  tBodyProps = {},
  trProps = {},
  thProps = {},
  tdProps = {},
  rowProps = {},
  THeadComponent = THead,
  TBodyComponent = TBody,
  TrComponent = Tr,
  HeadTrComponent = Tr,
  ThComponent = Th,
  TdComponent = Td,
  rowIdName,
  testId,
  sublevel,
  listLayout = false,
  loading = false,
  loadingText
}, ref) => {
  const getThTdClassName = (column, item, isHeader, customClassName = '') => classNames(isHeader && column.headerClassName, column.cellClassName, typeof column.className === 'function' ? column.className(item) : column.className, customClassName);
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('r-table', className, {
      sublevel,
      'list-layout': listLayout
    }),
    "test-id": testId,
    ref: ref,
    children: [/*#__PURE__*/_jsx(THeadComponent, {
      className: tHeadProps.className,
      children: /*#__PURE__*/_jsx(HeadTrComponent, {
        className: trProps.className,
        children: columns.map(column => column && /*#__PURE__*/_jsx(ThComponent, {
          testId: column?.testId,
          column: column,
          ...thProps,
          className: getThTdClassName(column, '', true, thProps?.className),
          children: renderHeader(column, data, rowProps)
        }, column.id || column?.accessor))
      })
    }), loading ? /*#__PURE__*/_jsx(LoadingIcon, {
      testId: "table-loading-icon",
      className: "table-loading-icon",
      message: loadingText
    }) : /*#__PURE__*/_jsx(TBodyComponent, {
      className: tBodyProps.className,
      ...tBodyProps,
      children: data.map((item, i) => /*#__PURE__*/_jsx(TrComponent, {
        item: item,
        ...(item.testId && {
          testId: item.testId
        }),
        ...trProps,
        children: columns.map(column => column && /*#__PURE__*/_jsx(TdComponent, {
          id: column?.id || column?.accessor,
          ...tdProps,
          ...(column?.tdTestId && {
            testId: column?.tdTestId
          }),
          className: getThTdClassName(column, item, false, tdProps?.className),
          children: renderCell(column, item, i, rowProps)
        }, column?.id || column?.accessor))
      }, rowIdName ? item[rowIdName] : false || i))
    })]
  });
});
Table.displayName = 'Table';
export default Table;