import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState, } from 'react';
import Box from '../Box';

/**
 * DroppableContainer component can be used to handle the re-ordering of nodes within a drag-and-drop context.
 *
 * Demos:
 *
 * - [Drag & Drop (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-drag-and-drop--overview)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the DroppableContainer component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered DroppableContainer component.
 */
const DroppableContainer = forwardRef((_a, ref) => {
    var { nodes, onOrderChange, children } = _a, rest = __rest(_a, ["nodes", "onOrderChange", "children"]);
    const [orderedNodes, setOrderedNodes] = useState([]);
    const dragNodeIndex = useRef(null);
    const dragOverNodeIndex = useRef(null);
    /**
     * Takes a deep copy of the nodes and sets them as the ordered nodes.
     */
    useEffect(() => setOrderedNodes(JSON.parse(JSON.stringify(nodes))), [nodes]);
    /**
     * Handles the drag start event.
     *
     * @param index - The index of the item being dragged.
     */
    const handleDragStart = (index) => {
        dragNodeIndex.current = index;
    };
    /**
     * Handles the drag enter event.
     *
     * @param index - The index of the item being dragged over.
     */
    const handleDragEnter = (index) => {
        dragOverNodeIndex.current = index;
    };
    /**
     * Handles the drag end event.
     */
    const handleDragEnd = () => {
        if (dragNodeIndex.current !== null &&
            dragOverNodeIndex.current !== null &&
            dragNodeIndex.current !== dragOverNodeIndex.current) {
            const updatedNodes = [...orderedNodes];
            const [draggedItem] = updatedNodes.splice(dragNodeIndex.current, 1);
            updatedNodes.splice(dragOverNodeIndex.current, 0, draggedItem);
            setOrderedNodes(updatedNodes);
            if (onOrderChange) {
                onOrderChange(updatedNodes);
            }
        }
        dragNodeIndex.current = null;
        dragOverNodeIndex.current = null;
    };
    const dragHandlers = {
        onDragEnd: handleDragEnd,
        onDragEnter: handleDragEnter,
        onDragStart: handleDragStart,
    };
    const getDragItemProps = (index) => ({
        className: 'OxygenDraggableItem-root',
        draggable: true,
        onDragEnd: handleDragEnd,
        onDragEnter: () => handleDragEnter(index),
        onDragStart: () => handleDragStart(index),
    });
    return (_jsx(Box, Object.assign({ ref: ref, className: "OxygenDroppableContainer-root" }, rest, { children: children({ dragHandlers, getDragItemProps, nodes: orderedNodes }) })));
});
export default DroppableContainer;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.OxygenDroppableContainer-root {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.OxygenDroppableContainer-root .OxygenDraggableItem-root {\n  cursor: grab;\n  transition: transform 0.2s, background 0.2s;\n}\n.OxygenDroppableContainer-root .OxygenDraggableItem-root:active {\n  background: #f9f9f9;\n  cursor: grabbing;\n  transform: scale(1.03);\n}");