import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './AddResourceButton.scss';
import ArrowsButton from './ArrowsButton/ArrowsButton';
import Icon from '../Icon';
import { useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { validateArrows, } from './type';
import usePortalPosition from '../../hooks/usePortalPosition';
const AddResourceButton = ({ id = 'AddModule', variant = 'primary', directionalArrow = [
    {
        direction: 'right',
        menuOptions: [
            {
                label: 'Sub Module',
                value: 'sub_module',
                icon: '',
                disable: false,
                tooltipForOption: '',
                tooltipPlacementForOption: undefined,
            },
        ],
    },
], zIndex = 1400, menuOptionZIndex = 1400, treeRowRef, onMenuOptionClick, isFromTree = false, }) => {
    const [isHovered, setIsHovered] = useState(false);
    const [positionArrowContainer, setPositionArrowContainer] = useState({
        left: 0,
        top: 0,
    });
    const [activeArrow, setActiveArrow] = useState('');
    const arrowContainerRef = useRef(null);
    const portalRef = useRef(null);
    const validArrows = validateArrows(directionalArrow);
    const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
    const handleHover = () => {
        setIsHovered(true);
        const { positionX, positionY } = portalPosition(arrowContainerRef);
        setPositionArrowContainer({ left: positionX, top: positionY });
        if (treeRowRef?.current) {
            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
            actionContainer?.classList.add('table-row-add-button');
        }
    };
    const handleLeave = (e) => {
        const nextTarget = e.relatedTarget;
        const isInsideButton = arrowContainerRef.current?.contains(nextTarget);
        const isInsidePortal = portalRef.current?.contains(nextTarget);
        if (isInsideButton || isInsidePortal)
            return;
        setIsHovered(false);
        setActiveArrow('');
        if (treeRowRef?.current) {
            const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
            actionContainer?.classList.remove('table-row-add-button');
        }
    };
    const handleArrowClick = (direction) => {
        if (activeArrow === direction) {
            setActiveArrow('');
            setIsHovered(false);
        }
        else {
            setActiveArrow(direction);
            setIsHovered(true);
        }
    };
    const getArrowButtonClass = () => {
        const directions = validArrows
            .map((arrow) => arrow.direction)
            .sort()
            .join('-');
        const arrowCountClass = validArrows.length === 2 ? 'ff-two-arrows' : '';
        return `ff-${directions} ${arrowCountClass}`;
    };
    return (_jsxs("div", { id: id, ref: arrowContainerRef, className: `${isFromTree ? 'ff-add-button-tree' : 'ff-add-button-container'} ${isHovered ? `ff-hovered-add-button--${variant}` : ''}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, children: [_jsx("span", { className: "ff-add-button", children: _jsx(Icon, { name: "plus_icon", width: 16, height: 16, className: isHovered
                        ? `ff-hovered-add-icon--${variant}`
                        : `ff-add-icon--${variant}` }) }), isHovered &&
                createPortal(_jsx("div", { ref: portalRef, id: "portal-123", className: `ff-arrow-buttons-container ${getArrowButtonClass()}`, onMouseEnter: handleHover, onMouseLeave: handleLeave, style: {
                        left: positionArrowContainer.left + (isFromTree ? 4 : 0),
                        top: positionArrowContainer.top + (isFromTree ? 2 : 0),
                        zIndex,
                    }, children: directionalArrow.map(({ direction, menuOptions }, index) => (_jsx(ArrowsButton, { direction: direction, onArrowClick: () => handleArrowClick(direction), menuOptions: menuOptions, isActive: activeArrow === direction, variant: variant, treeRowRef: treeRowRef, onMenuOptionClick: (option) => {
                            setIsHovered(false);
                            setActiveArrow('');
                            if (treeRowRef?.current) {
                                const actionContainer = treeRowRef.current.querySelector('.table-tree-fn-row-action, .table-tree-row-action');
                                actionContainer?.classList.remove('table-row-add-button');
                            }
                            onMenuOptionClick?.(option);
                        }, menuOptionZIndex: menuOptionZIndex }, index))) }), document.body)] }));
};
export default AddResourceButton;
//# sourceMappingURL=AddResourceButton.js.map