'use client';
import clsx from 'clsx';
import React from 'react';
import { useEffect, useRef, useState, } from 'react';
import { Each } from '../../00-base';
/**
 * Dropdown component for rendering a dropdown menu with actions.
 *
 * @component
 * @example
 * // Example usage of Dropdown component
 * <Dropdown
 *   actions={[{ text: 'Action 1', action: () => console.log('Action 1') }]}
 * >
 *   <button>Toggle Dropdown</button>
 * </Dropdown>
 *
 * @param {DropdownProps} props - The properties of the Dropdown component.
 * @param {Action[]} props.actions - Array of actions to be displayed in the dropdown.
 * @param {ReactNode} props.children - The content that triggers the dropdown.
 *
 * @returns {ReactNode} The rendered Dropdown component.
 */
export function Dropdown({ actions, children, activeClassName, ...restProps }) {
    const [toggle, setToggle] = useState(false);
    const [position, setPosition] = useState({ left: '0', top: '0' });
    const containerRef = useRef(null);
    const buttonRef = useRef(null);
    const dropdownRef = useRef(null);
    const handlerClick = () => setToggle((prevState) => !prevState);
    const handleOutsideClick = (event) => {
        if (containerRef.current &&
            !containerRef.current.contains(event.target)) {
            setToggle(false);
        }
    };
    useEffect(() => {
        if (toggle && dropdownRef.current && buttonRef.current) {
            const buttonRect = buttonRef.current.getBoundingClientRect();
            const dropdownRect = dropdownRef.current.getBoundingClientRect();
            const parentContainer = dropdownRef.current.closest('.container') || document.body;
            const parentRect = parentContainer.getBoundingClientRect();
            if (parentRect) {
                let left;
                let top;
                const right = buttonRect.right + dropdownRect.width + 16;
                if (right > parentRect.right) {
                    left = `calc(${buttonRect.right - dropdownRect.width}px)`;
                    top = `calc(${buttonRect.bottom}px + .25rem)`;
                }
                else {
                    left = `calc(${buttonRect.right}px + .25rem)`;
                    top = `calc(${buttonRect.top}px)`;
                }
                setPosition({ left, top });
            }
        }
    }, [toggle, actions, children]);
    useEffect(() => {
        document.addEventListener('mousedown', handleOutsideClick);
        return () => {
            document.removeEventListener('mousedown', handleOutsideClick);
        };
    }, []);
    // Función para pasar props al children
    const renderChildren = () => {
        if (React.isValidElement(children)) {
            const childProps = children.props;
            const existingClassName = childProps.className || '';
            const newClassName = clsx(existingClassName, toggle && activeClassName);
            return React.cloneElement(children, {
                'aria-expanded': toggle,
                'aria-haspopup': true,
                className: newClassName,
            });
        }
        return children;
    };
    return (<div ref={containerRef} className="relative inline-block">
      <div ref={buttonRef} onClick={handlerClick}>
        {renderChildren()}
      </div>
      {!!toggle && (<div ref={dropdownRef} style={{ ...position }} className={clsx('border-gray-5 dark:bg-gray-1 fixed top-0 left-full z-10 w-max min-w-32 overflow-hidden rounded-sm border bg-white shadow-md', restProps.className)}>
          <ul className="divide-gray-5 divide-y">
            <Each of={actions} render={({ text, action, icon, disabled }) => (<li key={text} className={`flex cursor-pointer items-center gap-2 px-3 py-2 text-sm font-semibold transition-colors ${disabled ? 'text-gray-4 pointer-events-none cursor-not-allowed' : 'cursor-pointer hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'}`} onClick={() => {
                    setToggle(false);
                    action();
                }}>
                  {icon}
                  {text}
                </li>)}/>
          </ul>
        </div>)}
    </div>);
}
//# sourceMappingURL=Dropdown.jsx.map