import { jsx, jsxs } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { Dropdown } from '../../core/Dropdown/Dropdown.js';
import '../../core/Dropdown/DropdownTrigger.js';
import '../../core/Dropdown/DropdownMenu.js';
import '../../core/Dropdown/DropdownItem.js';
import '../../core/Dropdown/DropdownSection.js';
import '../../core/Dropdown/DropdownSeparator.js';
import '../../core/Dropdown/Dropdown.theme.js';
import { Button } from '../../core/Button/Button.js';
import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';

/**
 * TableActions component with smart display logic
 * - <=2 actions: Show as individual icon buttons
 * - >=3 actions: Show all actions in overflow menu using Dropdown
 */
const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
    const sortedActions = useMemo(() => {
        return [...actions].sort((a, b) => {
            const priorityOrder = { high: 0, normal: 1 };
            const aPriority = priorityOrder[a.priority || "normal"];
            const bPriority = priorityOrder[b.priority || "normal"];
            return aPriority - bPriority;
        });
    }, [actions]);
    const shouldUseMenu = actions.length > maxVisibleActions;
    const disabledKeys = useMemo(() => {
        return sortedActions
            .filter((action) => { var _a; return (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row); })
            .map((action) => action.id);
    }, [sortedActions, row]);
    const handleAction = (key) => {
        var _a;
        const action = sortedActions.find((a) => a.id === key);
        if (action && !((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))) {
            action.onClick(row);
        }
    };
    const renderInlineActions = (actionsToRender) => {
        return actionsToRender.map((action) => {
            var _a;
            const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
            const Icon = action.icon;
            return (jsx(Button, { color: "primary", variant: "link", iconOnly: true, onClick: () => action.onClick(row), disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
                    ? "text-[var(--color-danger-400)] hover:text-[var(--color-danger)] dark:text-[var(--color-danger-400)] dark:hover:text-[var(--color-danger-300)]"
                    : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-muted)] dark:hover:text-[var(--color-text-secondary)]"), children: jsx(Icon, { className: "size-4" }) }, action.id));
        });
    };
    const renderOverflowMenu = () => {
        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "link", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
                        const Icon = action.icon;
                        return (jsx(Dropdown.Item, { itemKey: action.id, isDanger: action.variant === "danger", startContent: jsx(Icon, { className: "size-4" }), children: action.label }, action.id));
                    }) })] }));
    };
    return (jsx("div", { className: cn("flex items-center justify-end", className), children: shouldUseMenu
            ? renderOverflowMenu()
            : renderInlineActions(sortedActions) }));
};

export { TableActions };
