"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useMemo, useState } from "react";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { useIntersectionObserver } from "../useIntersectionObserver.js";
import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
import { useTableContainer } from "./TableContainerProvider.js";
import { tableHeader } from "./tableHeaderStyles.js";
/**
 * @remarks \@since 6.0.0
 */ export const isTableHeaderStickyActive = (entry)=>{
    return entry.intersectionRatio < 1 && entry.boundingClientRect.bottom <= window.innerHeight;
};
/**
 * **Client Component**
 * TODO: Create separate useStickyTableHeader + StickyTableHeader component
 *
 * Creates a `<thead>` element with some basic styles. This component will also
 * update the table configuration so that all the `TableCell` children will
 * automatically become `<th>` elements instead of the normal `<td>` as well as
 * disabling the hover effect and line wrapping. The hover effect and
 * line-wrapping can be re-enabled if desired through the `hoverable` and
 * `disableNoWrap` props.
 */ export const TableHeader = /*#__PURE__*/ forwardRef(function TableHeader(props, propRef) {
    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableHeaderStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
    // update the table configuration with the custom overrides for the `<thead>`
    const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
        lineWrap: propLineWrap,
        disableHover: !hoverable
    });
    const configuration = useMemo(()=>({
            dense,
            header: true,
            hAlign,
            vAlign,
            lineWrap,
            disableBorders,
            disableHover
        }), [
        dense,
        hAlign,
        vAlign,
        lineWrap,
        disableBorders,
        disableHover
    ]);
    const [theadRef, theadRefCallback] = useEnsuredRef(propRef);
    const { exists, containerRef } = useTableContainer();
    const [stickyActive, setStickyActive] = useState(false);
    const targetRef = useIntersectionObserver({
        ref: exists ? undefined : theadRefCallback,
        root: containerRef,
        disabled: !sticky || disableStickyStyles,
        threshold: exists ? 0 : 1,
        getRootMargin: useCallback(()=>{
            const thead = theadRef.current;
            if (!thead) {
                return;
            }
            let topOffset;
            if (exists) {
                topOffset = thead.offsetHeight - 1;
            } else {
                const top = parseFloat(window.getComputedStyle(thead).top);
                topOffset = Number.isNaN(top) ? 1 : top + 1;
            }
            return `-${topOffset}px 0px 0px`;
        }, [
            exists,
            theadRef
        ]),
        onUpdate: useCallback(([entry])=>{
            setStickyActive(isStickyActive(entry, exists));
        }, [
            exists,
            isStickyActive
        ]),
        // allow the user defined sticky options to override the default behavior
        ...stickyOptions
    });
    return /*#__PURE__*/ _jsxs(TableConfigProvider, {
        value: configuration,
        children: [
            /*#__PURE__*/ _jsx("thead", {
                ...remaining,
                ref: exists ? theadRefCallback : targetRef,
                className: tableHeader({
                    className,
                    dense,
                    sticky,
                    stickyActive,
                    stickyActiveClassName
                }),
                children: children
            }),
            exists && sticky && !disableStickyStyles && // rendering a `<tbody>` since it is valid to have 0-many in a table
            // https://html.spec.whatwg.org/multipage/tables.html#the-table-element
            /*#__PURE__*/ _jsx("tbody", {
                "aria-hidden": true,
                ref: targetRef
            })
        ]
    });
});

//# sourceMappingURL=TableHeader.js.map