import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useRef } from 'react';
import { Portal } from 'react-portal';
import { useInternalTableState } from '../table-provider/table-provider.js';
import { Icon } from '../../../ui/components/icon/icon.js';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../../ui/components/dropdown-menu/dropdown-menu.js';
import { cn } from '../../../scalars/lib/utils.js';
const RowActions = ({ open, data, rowIndex, rowRef, primaryAction, secondaryActions, isSecondaryActionsOpen, handleSecondaryActionsOpen, handleSecondaryActionsClose, }) => {
    const { api, config, state } = useInternalTableState();
    const selfRef = useRef(null);
    const tableRect = api.getHTMLTable()?.getBoundingClientRect();
    const handlePrimaryAction = useCallback(() => {
        if (primaryAction) {
            void primaryAction.callback({
                row: data.data,
                rowIndex,
                tableConfig: config,
            });
        }
    }, [config, primaryAction, data, rowIndex]);
    const deleteActions = useMemo(() => {
        if (!api.canDelete()) {
            return [];
        }
        return [
            {
                label: 'Delete',
                callback: async (_context) => api.deleteRows([rowIndex], {
                    askConfirmation: true,
                    description: `Are you sure you want to delete row #${data.__index + 1}?`,
                }),
            },
            ...(state.selectedRowIndexes.length > 1 && state.selectedRowIndexes.includes(rowIndex)
                ? [
                    {
                        label: `Delete ${Math.min(state.selectedRowIndexes.length, state.data.length)} selected rows`,
                        callback: async (_context) => api.deleteRows(state.selectedRowIndexes),
                    },
                ]
                : []),
        ];
    }, [api, data.__index, rowIndex, state.data.length, state.selectedRowIndexes]);
    const hasSecondaryActions = !!secondaryActions || deleteActions.length > 0;
    const haveOnlyOneAction = (!!primaryAction && !hasSecondaryActions) || (hasSecondaryActions && !primaryAction);
    return (_jsx(Portal, { children: _jsx("div", { ref: selfRef, className: cn(open || isSecondaryActionsOpen ? 'block opacity-100' : 'hidden opacity-0', 'fixed z-5 transition-opacity duration-200'), style: {
                left: `${(tableRect?.right ?? 0) + (haveOnlyOneAction ? -16 : -48)}px`,
                top: `${(rowRef.current?.getBoundingClientRect().top ?? 0) + 10}px`,
            }, children: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "rounded-md border border-gray-300 bg-gray-50 shadow-[2px_4px_7px_0px_rgba(107,122,150,0.25)]", children: _jsxs("div", { className: "flex gap-2 p-[3px] text-gray-500", children: [primaryAction && (_jsx("div", { className: "flex w-6 h-6 items-center justify-center cursor-pointer hover:bg-gray-100 hover:text-gray-600 rounded-sm", onClick: handlePrimaryAction, children: primaryAction.icon ?? _jsx(Icon, { name: "ArrowLeft", className: "rotate-180", size: 16 }) })), (deleteActions.length > 0 || secondaryActions) && (_jsxs(DropdownMenu, { open: isSecondaryActionsOpen, onOpenChange: (open) => {
                                    if (open) {
                                        handleSecondaryActionsOpen();
                                    }
                                    else {
                                        handleSecondaryActionsClose();
                                    }
                                }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "flex w-6 h-6 items-center justify-center cursor-pointer hover:bg-gray-100 hover:text-gray-600 rounded-sm", children: _jsx(Icon, { name: "VerticalDots", size: 16 }) }) }), _jsxs(DropdownMenuContent, { align: "end", alignOffset: -4, sideOffset: 6, onMouseLeave: handleSecondaryActionsClose, children: [secondaryActions?.map((action) => (_jsxs(DropdownMenuItem, { onClick: () => {
                                                    handleSecondaryActionsClose();
                                                    void action.callback({
                                                        row: data.data,
                                                        rowIndex,
                                                        tableConfig: config,
                                                    });
                                                }, children: [action.icon && action.icon, " ", action.label] }, action.label))), deleteActions.length > 0 && (secondaryActions ?? []).length > 0 && _jsx(DropdownMenuSeparator, {}), deleteActions.map((action) => (_jsxs(DropdownMenuItem, { onClick: () => {
                                                    handleSecondaryActionsClose();
                                                    void action.callback({
                                                        row: data.data,
                                                        rowIndex,
                                                        tableConfig: config,
                                                    });
                                                }, children: [action.icon && action.icon, " ", action.label] }, action.label)))] })] }))] }) }) }) }) }));
};
export { RowActions };
//# sourceMappingURL=row-actions.js.map