import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import Progress from '../Progress';
import Text from '../Text';
import EmptyState from '../EmptyState';
import Card, { CardContent } from '../Card';
const StyledTable = styled.table(props => {
    const { hoverHighlight, theme: { base: { palette: { 'secondary-background': hoverBg }, spacing }, components: { table } } } = props;
    const verticalSpacingHeader = `calc(${table.header['vertical-spacing']} * ${spacing})`;
    const verticalSpacingBody = `calc(${table.body['vertical-spacing']} * ${spacing})`;
    const horizontalSpacing = `calc(max(${table.header['horizontal-spacing']}, ${table.body['horizontal-spacing']}) * ${spacing})`;
    const borderHeader = `${table.header['border-width']} solid ${table.header['border-color']}`;
    const borderBody = `${table.body['border-width']} solid ${table.body['border-color']}`;
    return css `
    border-collapse: collapse;
    width: 100%;
    background-color: transparent;

    thead {
      tr th {
        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingHeader : '0'} ${table.spacing['horizontal-inner'] ? horizontalSpacing : '0'}`};
        border-bottom: ${table.border['horizontal-inner'] ? borderHeader : 'none'};
        border-inline-end: ${table.border['vertical-inner'] ? borderHeader : 'none'};
      }

      tr:first-of-type th {
        padding-top: ${table.spacing['vertical-outer'] ? verticalSpacingHeader : '0'};
        border-top: ${table.border['horizontal-outer'] ? borderHeader : 'none'};
      }

      tr th:first-of-type {
        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
        border-inline-start: ${table.border['vertical-outer'] ? borderHeader : 'none'};
      }

      tr th:last-of-type {
        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
        border-inline-end: ${table.border['vertical-outer'] ? borderHeader : 'none'};
      }
    }

    tbody {
      tr td {
        padding: ${`${table.spacing['vertical-inner'] ? verticalSpacingBody : '0'} ${table.spacing['horizontal-inner'] ? horizontalSpacing : '0'}`};
        border-bottom: ${table.border['horizontal-inner'] ? borderBody : 'none'};
        border-inline-end: ${table.border['vertical-inner'] ? borderBody : 'none'};
      }

      tr:last-of-type td {
        padding-bottom: ${table.spacing['vertical-outer'] ? verticalSpacingBody : '0'};
        border-bottom: ${table.border['horizontal-outer'] ? borderBody : 'none'};
      }

      tr td:first-of-type {
        padding-inline-start: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
        border-inline-start: ${table.border['vertical-outer'] ? borderBody : 'none'};
      }

      tr td:last-of-type {
        padding-inline-end: ${table.spacing['horizontal-outer'] ? horizontalSpacing : '0'};
        border-inline-end: ${table.border['vertical-outer'] ? borderBody : 'none'};
      }
    }

    ${hoverHighlight &&
        css `
      tbody tr:hover td,
      tbody tr:focus-within td {
        background-color: ${hoverBg};
      }
    `}
  `;
});
StyledTable.defaultProps = defaultThemeProp;
const StyledCell = styled.td(({ align, noWrap = false }) => css `
    text-align: ${align || 'left'};
    white-space: ${noWrap ? 'nowrap' : null};
  `);
StyledCell.defaultProps = defaultThemeProp;
const StyledHeaderCell = styled.th(({ theme: { base: { 'font-size': fontSize, 'font-scale': fontScale }, components: { table: { header } } } }) => {
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
      font-size: ${fontSizes[header['font-size']]};
      font-weight: ${header['font-weight']};
      color: ${header['foreground-color']};
      background-color: ${header['background-color']};
    `;
});
StyledHeaderCell.defaultProps = defaultThemeProp;
const StyledBodyCell = styled.td(({ theme: { components: { table: { body } } } }) => css `
    color: ${body['foreground-color']};
    background-color: ${body['background-color']};
  `);
StyledBodyCell.defaultProps = defaultThemeProp;
const StyledEmptyCell = styled.td `
  padding: calc(2 * ${props => props.theme.base.spacing});
`;
StyledEmptyCell.defaultProps = defaultThemeProp;
const StyledLoadingCell = styled.td `
  position: relative;
  height: 6rem;
`;
export const StyledTableWrapper = styled.div `
  /* Setting it on a table element requires 'display: block' which breaks a11y. */
  overflow-x: auto;
`;
StyledTableWrapper.defaultProps = defaultThemeProp;
const StyledTableCaption = styled.caption `
  ${hideVisually}
`;
StyledTableCaption.defaultProps = defaultThemeProp;
/** @deprecated */
const Table = forwardRef(function Table(props, ref) {
    const { columns, data = [], hoverHighlight = false, loading = false, loadingMessage = '', title, ...restProps } = props;
    return (_jsx(Card, { children: _jsxs(CardContent, { container: { rowGap: 1 }, children: [title && (_jsx(Text, { variant: 'h2', as: 'span', "aria-hidden": true, children: title })), _jsx(StyledTableWrapper, { children: _jsxs(StyledTable, { ref: ref, hoverHighlight: hoverHighlight, ...restProps, children: [title && _jsx(StyledTableCaption, { children: title }), _jsx("thead", { children: _jsx("tr", { children: columns.map(col => (_createElement(StyledCell, { as: StyledHeaderCell, ...col, scope: 'col', key: col.label }, col.label))) }) }), _jsxs("tbody", { children: [loading && (_jsx("tr", { children: _jsx(StyledLoadingCell, { colSpan: columns.length, children: _jsx(Progress, { placement: 'local', message: loadingMessage }) }) })), data.length > 0 &&
                                        !loading &&
                                        data.map(row => (_jsx("tr", { children: columns.map(({ renderer: Renderer, ...col }) => (_createElement(StyledCell, { as: StyledBodyCell, ...col, key: `${col.label}-${row.id}` }, typeof Renderer === 'function' ? _jsx(Renderer, { ...row }) : row[Renderer]))) }, row.id))), data.length === 0 && !loading && (_jsx("tr", { children: _jsx(StyledEmptyCell, { colSpan: columns.length, children: _jsx(EmptyState, {}) }) }))] })] }) })] }) }));
});
export default Table;
//# sourceMappingURL=Table.js.map