// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { useStickyCellStyles } from '../sticky-columns';
import { getTableColHeaderRoleProps } from '../table-role';
import { getStickyClassNames } from '../utils';
import tableStyles from '../styles.css.js';
import styles from './styles.css.js';
export function TableThElement({ resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, resizable, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel, tableVariant, colSpan, rowSpan, scope, columnGroupId, isLast, className, boundaryRef, ...props }) {
    const isVisualRefresh = useVisualRefresh();
    const stickyStyles = useStickyCellStyles({
        stickyColumns: stickyState,
        columnId,
        getClassName: props => getStickyClassNames(styles, props),
    });
    const cellRefObject = useRef(null);
    const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject, boundaryRef);
    const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);
    return (React.createElement("th", { "data-focus-id": `header-${String(columnId)}`, className: clsx(styles['header-cell'], styles[`header-cell-variant-${variant}`], sticky && styles['header-cell-sticky'], resizable && styles['header-cell-resizable'], stuck && styles['header-cell-stuck'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']), tableVariant && styles[`table-variant-${tableVariant}`], scope === 'colgroup' && styles['header-cell-group'], {
            [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,
            [styles['header-cell-sortable']]: sortingStatus,
            [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',
            [styles['header-cell-disabled']]: sortingDisabled,
            [styles['header-cell-ascending']]: sortingStatus === 'ascending',
            [styles['header-cell-descending']]: sortingStatus === 'descending',
            [styles['header-cell-hidden']]: hidden,
            [styles['header-cell-spans-rows']]: (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) > 1,
            [styles['header-cell-grouped']]: !!columnGroupId,
        }, stickyStyles.className, className), colSpan: colSpan, rowSpan: rowSpan, style: { ...resizableStyle, ...stickyStyles.style }, ref: mergedRef, ...getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex }), scope: scope !== null && scope !== void 0 ? scope : 'col', tabIndex: cellTabIndex === -1 ? undefined : cellTabIndex, ...copyAnalyticsMetadataAttribute(props), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), ...(isLast ? { 'data-rightmost': true } : {}), ...(scope !== 'colgroup' ? { 'data-column-index': colIndex + 1 } : {}), ...(columnGroupId ? { 'data-column-group-id': columnGroupId } : {}) }, children));
}
//# sourceMappingURL=th-element.js.map