import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useRef } from 'react';
import Checkbox from '../../Checkbox';
import RadioButton from '../../RadioButton';
import { prepareData } from '../../../utils/TableCell/TableCell';
import { formatCellData } from '../Utils/formatDataCell';
const TableHead = React.memo(({ columnsData, rootNode, selected, onCheckBoxChange, selectedNode, tableHeaderBgColor, hideOnDisable, transparentHeader, scriptLengthTruncate = 25, }) => {
    // const hasDefaultValues = useMemo(
    //   () => columnsData.some(({ defaultValue }) => !!defaultValue),
    //   [columnsData]
    // );
    const rootNodeRowRef = useRef(null);
    const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true);
    }, []);
    return (_jsxs("thead", { className: "ff-table-tree-head", children: [_jsx("tr", { className: "ff-table-tree-row no-hover", children: columnsData.map(({ name, width }) => (_jsx("th", { className: "ff-table-tree-th", style: {
                        width: width,
                        backgroundColor: transparentHeader
                            ? 'transparent'
                            : tableHeaderBgColor,
                    }, children: name }, name))) }), rootNode && (_jsx("tr", { className: `ff-table-tree-row show ${selectedNode && selectedNode === rootNode?.node?.key
                    ? 'hover'
                    : ''}`, ref: rootNodeRowRef, children: columnsData.map((col, index) => (_jsx("td", { className: "ff-table-tree-td", children: _jsxs("span", { className: "tree-table-default-content", 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("span", { className: "tree-table-td-content-text", children: [col.accessor === 'name' ? (_jsx("span", { children: rootNode.node[col.accessor] })) : (_jsx("span", { children: formatCellData(prepareData(rootNode.node, col), scriptLengthTruncate) })), rootNode.cell && index === 0 && (_jsx("span", { className: "table-tree-root-cell", children: (() => {
                                            return rootNode.cell(rootNode.node);
                                        })() }))] }), rootNode.actions &&
                                index === 0 &&
                                isMounted &&
                                rootNodeRowRef.current && (_jsx("div", { className: "table-tree-row-action", children: (() => {
                                    return rootNode.actions(rootNode.node, rootNodeRowRef);
                                })() }))] }) }, index))) }))] }));
});
export default TableHead;
//# sourceMappingURL=TableHead.js.map