import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useContext } from 'react';
import { TableContext } from './Table.js';
import { cn } from '../../../utils/cn.js';
import { alignmentClasses } from './Table.utils.js';

/**
 * Declarative Table Header component
 */
const HeaderComponent = ({ children, freezeHeader, className = '' }) => {
    const contextValue = useContext(TableContext);
    const { theme } = contextValue;
    const headerClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerContainerStyle, freezeHeader !== undefined
        ? (freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '')
        : (contextValue.freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : ''), className);
    return (jsx("thead", { className: headerClasses, "data-freeze": freezeHeader ? 'true' : undefined, children: children }));
};
HeaderComponent.displayName = 'Table.Header';
const Header = React__default.memo(HeaderComponent);
/**
 * Declarative Table Body component
 */
const BodyComponent = ({ children, className = '', }) => {
    const { theme } = useContext(TableContext);
    return (jsx("tbody", { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyStyle, className), children: children }));
};
BodyComponent.displayName = 'Table.Body';
const Body = React__default.memo(BodyComponent);
/**
 * Declarative Table Row component
 */
const RowComponent = ({ children, isExpandable = false, isExpanded = false, onExpandToggle, isSelected = false, onSelectToggle, className = '', }) => {
    const { theme } = useContext(TableContext);
    const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle), theme === null || theme === void 0 ? void 0 : theme.hoverRowStyle, className);
    const handleRowClick = () => {
        if (onSelectToggle) {
            onSelectToggle();
        }
    };
    return (jsx("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle ? handleRowClick : undefined, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined, children: children }));
};
RowComponent.displayName = 'Table.Row';
const Row = React__default.memo(RowComponent);
/**
 * Declarative Table Cell component
 */
const CellComponent = ({ children, isFrozen = false, isLastFrozen = false, align, width, className = '', colSpan, }) => {
    const { theme } = useContext(TableContext);
    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), align && alignmentClasses[align], className);
    return (jsx("td", { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width }, colSpan: colSpan, role: "cell", children: children }));
};
CellComponent.displayName = 'Table.Cell';
const Cell = React__default.memo(CellComponent);
/**
 * Declarative Table Header Cell component
 */
const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false, isSortable = false, sortDirection, onSort, align = 'left', width, className = '', }) => {
    const { theme } = useContext(TableContext);
    const headerCellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), align && alignmentClasses[align], isSortable && 'cursor-pointer', className);
    return (jsx("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width }, role: "columnheader", "aria-sort": sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined, children: jsxs("div", { className: cn("flex items-center", {
                'justify-end': align === 'right',
                'justify-center': align === 'center',
            }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc' ? '\u2191' : '\u2193' }))] }) }));
};
HeaderCellComponent.displayName = 'Table.HeaderCell';
const HeaderCell = React__default.memo(HeaderCellComponent);

export { Body, Cell, Header, HeaderCell, Row };
