import { useIntl } from 'react-intl';
import TableCell from './TableCell.mjs';
import TableHeader from './TableHeader.mjs';
import TableRow from './TableRow.mjs';
import Alert from '../alert/Alert.mjs';
import messages from './Table.messages.mjs';
import Loader from '../loader/Loader.mjs';
import '../common/theme.mjs';
import '../common/direction.mjs';
import '../common/propsValues/control.mjs';
import '../common/propsValues/breakpoint.mjs';
import { Size } from '../common/propsValues/size.mjs';
import '../common/propsValues/typography.mjs';
import '../common/propsValues/width.mjs';
import '../common/propsValues/type.mjs';
import '../common/propsValues/dateMode.mjs';
import '../common/propsValues/monthFormat.mjs';
import '../common/propsValues/position.mjs';
import '../common/propsValues/layouts.mjs';
import '../common/propsValues/status.mjs';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import '../common/propsValues/profileType.mjs';
import '../common/propsValues/variant.mjs';
import '../common/propsValues/scroll.mjs';
import '../common/propsValues/markdownNodeType.mjs';
import '../common/fileType.mjs';
import '@transferwise/icons';
import { clsx } from 'clsx';
import 'react';
import '../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import StatusIcon from '../statusIcon/StatusIcon.mjs';
import { useTheme } from '@wise/components-theming';
import Body from '../body/Body.mjs';

const Table = ({
  'aria-labelledby': ariaLabelledBy,
  data,
  loading,
  className,
  fullWidth = true,
  error
}) => {
  const {
    formatMessage
  } = useIntl();
  const {
    theme
  } = useTheme();
  const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);
  const getRowLength = () => {
    const columnsLength = data?.headers?.length ?? 0;
    return data?.onRowClick ? columnsLength + 1 : columnsLength;
  };
  const getTableContent = () => {
    if (loading) {
      return /*#__PURE__*/jsx(TableRow, {
        children: /*#__PURE__*/jsx(TableCell, {
          children: /*#__PURE__*/jsx(Loader, {
            "data-testid": "np-table-loader"
          })
        })
      });
    }
    // Shows the `emptyData` message when there is no data to display
    if (!data?.rows?.length) {
      return /*#__PURE__*/jsx(TableRow, {
        children: /*#__PURE__*/jsx(TableCell, {
          colSpan: data?.headers?.length,
          children: /*#__PURE__*/jsxs("div", {
            className: "np-table-empty-data",
            "data-testid": "np-table-empty-data",
            children: [/*#__PURE__*/jsx(StatusIcon, {
              sentiment: Sentiment.WARNING,
              size: Size.MEDIUM
            }), /*#__PURE__*/jsx(Body, {
              type: "body-default-bold",
              children: formatMessage(messages.emptyData)
            })]
          })
        })
      });
    }
    return data?.rows?.map((rowData, rowIndex) => {
      return /*#__PURE__*/jsx(TableRow, {
        rowData: rowData,
        hasSeparator: data?.rows?.length ? data.rows.length - 1 !== rowIndex : false,
        onRowClick: data?.onRowClick
      }, 'table-row-'.concat(rowIndex.toString()));
    });
  };
  if (error) {
    return /*#__PURE__*/jsx(Alert, {
      className: "np-table-error",
      message: error.message,
      type: Sentiment.NEGATIVE,
      action: {
        href: error?.action?.href ?? '/',
        text: error?.action?.text ?? formatMessage(messages.refreshPage)
      },
      "data-testid": "np-table-error"
    });
  }
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx("div", {
      "aria-live": "polite",
      className: "sr-only",
      children: formatMessage(messages[loading ? 'loading' : 'loaded'])
    }), /*#__PURE__*/jsx("div", {
      role: loading ? 'presentation' : 'region',
      "aria-labelledby": ariaLabelledBy,
      className: clsx('np-table-outer-container', className, {
        'np-theme-personal': theme === 'bright-green',
        'np-table-outer-container--center': !fullWidth,
        'np-table-outer-container--full-width': fullWidth
      }),
      tabIndex: 0,
      "data-testid": "np-table-outer-container",
      children: /*#__PURE__*/jsx("div", {
        className: clsx('np-table-container', {
          'np-table-container--loading': loading
        }),
        "data-testid": "np-table-container",
        children: /*#__PURE__*/jsx("div", {
          className: "np-table-inner-container",
          children: /*#__PURE__*/jsxs("table", {
            className: "np-table",
            children: [/*#__PURE__*/jsx("thead", {
              "aria-hidden": isEmptyHeader,
              children: /*#__PURE__*/jsxs("tr", {
                children: [isEmptyHeader ? /*#__PURE__*/jsx(TableHeader, {}) : data?.headers?.map((headerItem, index) => /*#__PURE__*/jsx(TableHeader, {
                  ...headerItem
                }, headerItem.header?.concat(index.toString()))), data?.onRowClick && /*#__PURE__*/jsx(TableHeader, {
                  isActionHeader: true
                })]
              })
            }), /*#__PURE__*/jsxs("tbody", {
              children: [/*#__PURE__*/jsx("tr", {
                "aria-hidden": "true",
                className: "np-table-row np-table-row--cosmetic",
                children: /*#__PURE__*/jsx("td", {
                  className: "np-table-cell",
                  colSpan: getRowLength()
                })
              }, "first-np-table-row--cosmetic"), getTableContent(), /*#__PURE__*/jsx("tr", {
                "aria-hidden": "true",
                className: "np-table-row np-table-row--cosmetic",
                children: /*#__PURE__*/jsx("td", {
                  className: "np-table-cell",
                  colSpan: getRowLength()
                })
              }, "last-np-table-row--cosmetic")]
            })]
          })
        })
      })
    })]
  });
};

export { Table as default };
//# sourceMappingURL=Table.mjs.map
