import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useRef, useState, useEffect } from 'react';
import { prepareData } from '../Utils/TableCell.js';
import Checkbox from '../../Checkbox/Checkbox.js';
import RadioButton from '../../RadioButton/RadioButton.js';
import AutoTruncateText from '../../AutoTruncateText/AutoTruncateText.js';

const TableHead = React__default.memo(({ columnsData, columnMeta, totalWidth, rootNode, selected, onCheckBoxChange, selectedNode, tableHeaderBgColor, hideOnDisable, transparentHeader, showHeader = true, }) => {
    const rootNodeRowRef = useRef(null);
    const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true);
    }, []);
    const getCellStyle = (index, width) => {
        const meta = columnMeta?.[index];
        return {
            width: meta?.width ?? width,
            position: meta?.sticky ? 'sticky' : undefined,
            left: meta?.sticky ? meta.left : undefined,
            zIndex: meta?.sticky ? meta.zIndex : undefined,
        };
    };
    return (jsxs("div", { className: "ff-table-tree-fn-head", children: [showHeader && (jsx("div", { className: "ff-table-tree-fn-row no-hover", style: { minWidth: totalWidth }, children: columnsData.map(({ name, width }, index) => (jsx("div", { className: `ff-table-tree-fn-th ${columnMeta?.[index]?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": index, style: {
                        ...getCellStyle(index, width),
                        backgroundColor: transparentHeader
                            ? 'transparent'
                            : tableHeaderBgColor,
                        pointerEvents: transparentHeader ? 'none' : 'auto',
                    }, children: name }, name))) })), rootNode && (jsx("div", { className: `ff-table-tree-fn-row show-tree ${selectedNode && selectedNode === rootNode?.node?.key
                    ? 'hover'
                    : ''}`, ref: rootNodeRowRef, children: columnsData.map((col, index) => (jsx("div", { className: `ff-table-tree-fn-td ${columnMeta?.[index]?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": index, style: getCellStyle(index, col.width), children: jsxs("span", { className: `tree-table-fn-default-content ${index === 0 ? 'ff-table-root-index-0' : ''}`, children: [index === 0 &&
                                rootNode.select === 'checkbox' &&
                                !(hideOnDisable && rootNode.node.isDisabled) && (jsx(Checkbox, { checked: rootNode?.node?.selectedStatus !== 'partially' &&
                                    (rootNode?.node?.selectedStatus === 'completely' ||
                                        false), partial: rootNode.node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, rootNode.node), disabled: rootNode.node.isDisabled })), index === 0 &&
                                rootNode.select === 'radio' &&
                                !(hideOnDisable && rootNode.node.isDisabled) && (jsx(RadioButton, { name: rootNode.node.key, checked: selected.includes(rootNode.node.key), value: rootNode.node.key, onChange: (e) => onCheckBoxChange(e, rootNode.node), disabled: rootNode.node.isDisabled })), jsxs("div", { className: "tree-table-cell-flex", children: [jsx(AutoTruncateText, { children: col.accessor === 'name'
                                            ? rootNode.node[col.accessor]
                                            : prepareData(rootNode.node, col) }), rootNode.cell && index === 0 && (jsx("span", { className: "table-tree--fn-root-cell", children: rootNode.cell(rootNode.node) })), rootNode.actions &&
                                        index === 0 &&
                                        isMounted &&
                                        rootNodeRowRef.current && (jsx("div", { className: "table-tree-fn-row-action", children: rootNode.actions(rootNode.node, rootNodeRowRef) }))] })] }) }, index))) }))] }));
});
TableHead.displayName = 'TableHead';

export { TableHead as default };
//# sourceMappingURL=TableHead.js.map
