import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { prepareData } from '../Utils/TableCell';
import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
import Tooltip from '../../Tooltip';
import Checkbox from '../../Checkbox';
import RadioButton from '../../RadioButton';
import AddModule from '../../EditLabel';
import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
import Spinner from '../../../assets/icons/spinner.svg?react';
const renderSpaces = (level, parentSiblings = [], isLast, nextSibling, isContainer) => {
    let siblingsArray = parentSiblings;
    const isLastNode = nextSibling !== undefined ? !nextSibling : isLast;
    if (checkEmpty(parentSiblings)) {
        if (!isNaN(level)) {
            siblingsArray = Array(level).fill(true);
        }
    }
    return (_jsx("div", { className: "tree-table-fn-space-container", children: siblingsArray?.map((line, i) => (_jsx("span", { className: `tree-table-fn-space-block tree-table-fn-space-block-${i} ${!line ? 'no-lines' : ''} ${isLastNode && i === level - 1 ? 'last-node' : ''} ${isContainer ? 'folder' : ''}` }, i))) }));
};
const TableCell = React.memo(({ treeRowRef, col, colIndex, columnMeta, node, selected, select, onCheckBoxChange, onToggleExpand, onAddConfirm, onAddCancel, handleEditFieldError, isExpanding, columnTextColor, hideOnDisable, addModuleInputWidth, addModuleSelectWidth, disableEditLabelConfirmIcon, isEditable, setIsEditable, }) => {
    //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-fn-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-fn-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-fn-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));
    //     });
    //   };
    // }, []);
    const cellStyle = {
        color: `${columnTextColor || 'var(--ff-primary-text-color)'}`,
        width: columnMeta?.width ?? col?.width,
        position: columnMeta?.sticky ? 'sticky' : undefined,
        left: columnMeta?.sticky ? columnMeta.left : undefined,
        zIndex: columnMeta?.sticky ? columnMeta.zIndex : undefined,
    };
    return (_jsxs("div", { className: `ff-table-tree-fn-td ${col.isTree && node.container ? 'folder' : ''} ${columnMeta?.sticky ? 'sticky-tree-column' : ''}`, "data-col-index": colIndex, style: cellStyle, children: [col.isTree &&
                renderSpaces(node.hierarchy, node.parentSiblings, node.lastChild, node.nextSibling, node.container), _jsxs("div", { className: "tree-fn-title-container", children: [col.isTree && (_jsx("span", { className: `tree-table-fn-space-block  last-tree-fn-block last-tree-fn-block tree-table-fn-space-block-${node.hierarchy} ${node?.expanded
                            ? 'tree-fn-row-expanded'
                            : 'tree-fn-row-collapsed'} ${node.container && node.expandable ? '' : 'no-tree-folder'}`, children: node.container && node.expandable && (_jsxs("span", { onClick: () => onToggleExpand(node), children: [' ', isExpanding ? _jsx(Spinner, {}) : _jsx(Arrow, {})] })) })), _jsxs("span", { className: `tree-table-fn-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-fn-td-content-select", children: node.selectedStatus === 'none' ? (_jsx(Tooltip, { title: node?.currentEnvId &&
                                                node?.envId &&
                                                node?.currentEnvId !== node?.envId
                                                ? '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-fn-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 }) }))] })), _jsx("div", { className: "tree-table-cell-flex", children: node.isNewNode && col.isTree ? (_jsx(AddModule, { 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, isEditable: isEditable, setIsEditable: setIsEditable, isOnBlurTrue: false, isDisable: { confirm: disableEditLabelConfirmIcon }, isTableTree: true })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "tree-table-fn-td-content-text", children: prepareData(node, col) }), col.actions && !node?.isNewNode && (_jsx("div", { className: "table-tree-fn-row-action", children: col.actions(node, treeRowRef) }))] })) })] })] })] }));
});
TableCell.displayName = 'TableCell';
export default TableCell;
//# sourceMappingURL=TableCell.js.map