import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React__default from 'react';
import { prepareData } from '../../../utils/TableCell/TableCell.js';
import Checkbox from '../../Checkbox/Checkbox.js';
import RadioButton from '../../RadioButton/RadioButton.js';
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty.js';
import EditLabel from '../../EditLabel/EditLabel.js';
import SvgArrowsDownIcon from '../../../assets/icons/arrows_down_icon.svg.js';
import SvgSpinner from '../../../assets/icons/spinner.svg.js';
import Tooltip from '../../Tooltip/Tooltip.js';
import { formatCellData } from '../Utils/formatDataCell.js';

const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
    let siblingsArray = parentSiblings;
    let isLastNode = isLast;
    if (checkEmpty(parentSiblings)) {
        if (!isNaN(level)) {
            siblingsArray = Array(level).fill(true);
        }
    }
    return (jsx("div", { className: "tree-table-space-container", children: siblingsArray?.map((line, i) => (jsx("span", { className: `tree-table-space-block tree-table-space-block-${i} ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''} ${isContainer ? 'folder' : ''}` }, i))) }));
};
const TableCell = React__default.memo(({ treeRowRef, col, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, scriptLengthTruncate, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, }) => {
    //Todo uncomment the following code when we are highlighting the tree table nodes on hover
    // useEffect(() => {
    //   const handleHover = (event: MouseEvent, isHovering: boolean) => {
    //     const target = event.target as HTMLElement;
    //     const levelClass = Array.from(target.classList).find((cls) =>
    //       cls.startsWith('tree-table-space-block-')
    //     );
    //     if (levelClass) {
    //       const level = levelClass.split('-').pop();
    //       // Check if level is valid before selecting elements
    //       if (level) {
    //         const sameLevelBlocks = document.querySelectorAll(
    //           `.tree-table-space-block-${level}`
    //         ) as NodeListOf<HTMLElement>;
    //         sameLevelBlocks.forEach((block) => {
    //           if (isHovering) {
    //             block.classList.add('tree-table-hovered');
    //           } else {
    //             block.classList.remove('tree-table-hovered');
    //           }
    //         });
    //       }
    //     }
    //   };
    //   const spaceBlocks = document.querySelectorAll(
    //     '.tree-table-space-block'
    //   ) as NodeListOf<HTMLElement>;
    //   spaceBlocks.forEach((block) => {
    //     block.addEventListener('mouseenter', (e) => handleHover(e, true));
    //     block.addEventListener('mouseleave', (e) => handleHover(e, false));
    //   });
    //   return () => {
    //     spaceBlocks.forEach((block) => {
    //       block.removeEventListener('mouseenter', (e) => handleHover(e, true));
    //       block.removeEventListener('mouseleave', (e) => handleHover(e, false));
    //     });
    //   };
    // }, []);
    return (jsxs("td", { className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`, style: {
            color: `${columnTextColor || 'var(--ff-primary-text-color)'}`,
        }, children: [col.isTree &&
                renderSpaces(node.hierarchy, node.parentSiblings, node.lastChild, node.container), jsxs("div", { className: "tree-title-container", children: [col.isTree && (jsx("span", { className: `tree-table-space-block  last-block last-block tree-table-space-block-${node.hierarchy} ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container && node.expandable ? '' : 'no-folder'}`, children: node.container && node.expandable && (jsxs("span", { onClick: () => onToggleExpand(node), children: [' ', isExpanding ? jsx(SvgSpinner, {}) : jsx(SvgArrowsDownIcon, {})] })) })), jsxs("span", { className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`, children: [!node?.isNewNode && (jsxs(Fragment, { children: [col.isTree &&
                                        select === 'checkbox' &&
                                        !(hideOnDisable && node.unselectable) && (jsx("span", { className: "tree-table-td-content-select", children: node.selectedStatus === 'none' ? (jsx(Tooltip, { title: !!node.machine
                                                ? 'This script is assigned to another environment. Selecting it will reassign it to the current environment.'
                                                : undefined, children: jsx(Checkbox, { checked: node.selectedStatus === 'completely', partial: node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
                                                    node.state === 'REVIEW' ||
                                                    node?.isDisable === true, isDefaultHover: node.selectedStatus === 'none' && !!node.machine }) })) : (jsx(Checkbox, { checked: node.selectedStatus === 'completely', partial: node.selectedStatus === 'partially', onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
                                                node.state === 'REVIEW' ||
                                                node?.isDisable === true })) })), col.isTree &&
                                        select === 'radio' &&
                                        !(hideOnDisable && node.unselectable) && (jsx("span", { className: "tree-table-td-content-select", children: jsx(RadioButton, { name: node.key, checked: selected.includes(node.key), value: node.key, onChange: (e) => onCheckBoxChange(e, node), disabled: node.unselectable ||
                                                node.state === 'REVIEW' ||
                                                node?.isDisable === true }) }))] })), node.isNewNode && col.isTree ? (jsx(EditLabel, { onCancel: onAddCancel, onConfirm: onAddConfirm, value: node.value, label: node?.label, optionsList: node.options, selectedOption: node.selectedOption, withDropdown: node.type === 'inputWithDropdown', handleCustomError: handleEditFieldError, inputFieldWidth: addModuleInputWidth, selectFieldWidth: addModuleSelectWidth, confirmIconTooltip: node.confirmIconTooltip, cancelIconTooltip: node.cancelIconTooltip, isOnBlurTrue: true, isDisable: { confirm: disableEditLabelConfirmIcon } })) : (jsx("span", { className: "tree-table-td-content-text", children: formatCellData(prepareData(node, col), scriptLengthTruncate) }))] })] }), col.actions && !node?.isNewNode && (jsx("div", { className: `table-tree-row-action`, children: (() => {
                    return col.actions(node, treeRowRef);
                })() }))] }));
});

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