import React from "react";
import { CaretDownCircleFillIcon, CaretUpCircleFillIcon, DragVerticalIcon, } from "@navikt/aksel-icons";
import { useDragAndDropContext } from "../root/DragAndDrop.context.js";
/**
 * DragAndDropDragHandler
 *
 * A button component that serves as a drag handle for drag and drop operations.
 * Can be used to initiate dragging of elements in a data table or list.
 */
export const DragAndDropDragHandler = React.forwardRef(({ item, itemRef, isOverlay, itemLabel }, forwardedRef) => {
    var _a, _b, _c;
    const context = useDragAndDropContext();
    const active = (context === null || context === void 0 ? void 0 : context.dragHandlerActive) &&
        item &&
        ((_a = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _a === void 0 ? void 0 : _a.id) === item.id;
    if (isOverlay) {
        // Render a simple drag icon for the overlay, which is used as a visual representation of the item being dragged
        return (React.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler", ref: forwardedRef, "aria-hidden": true },
            React.createElement(DragVerticalIcon, { fontSize: "1.5rem" })));
    }
    return (React.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler", ref: forwardedRef },
        active && (React.createElement("button", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up", onClick: () => context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(-1, itemLabel), onMouseDown: (e) => e.preventDefault(), disabled: ((_b = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _b === void 0 ? void 0 : _b.index) === 0, type: "button" },
            React.createElement(CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.8rem" }))),
        React.createElement("button", { "aria-label": `${itemLabel}. Plass ${item.index + 1}.`, "aria-pressed": Boolean(active), "aria-roledescription": "draggable", type: "button", className: "aksel-data-drag-and-drop__drag-handler__button", "data-drag-handler-active": active, onPointerDown: (event) => {
                if (active)
                    return;
                event.stopPropagation();
                context === null || context === void 0 ? void 0 : context.startPendingDrag(event, item, (itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) || null);
            }, onClick: (event) => {
                if (!active) {
                    context === null || context === void 0 ? void 0 : context.onKeyboardDragStart(item);
                    event.currentTarget.focus();
                }
                else {
                    context === null || context === void 0 ? void 0 : context.onKeyboardDragStart(null);
                }
            }, onBlur: () => {
                if (context === null || context === void 0 ? void 0 : context.activeItem)
                    return;
                context === null || context === void 0 ? void 0 : context.cancelDrag();
            }, onKeyDown: (event) => {
                if (event.key === "Enter" || event.key === " ") {
                    // Enter or space, currently active item - end keyboard dragging
                    event.preventDefault();
                    context === null || context === void 0 ? void 0 : context.onKeyboardDragStart(active ? null : item);
                    return;
                }
                if (!active)
                    return;
                if (event.key === "Escape") {
                    // Cancel dragging
                    event.preventDefault();
                    context === null || context === void 0 ? void 0 : context.setAnnouncer(`Flytting av ${itemLabel} avbrutt.`);
                    context === null || context === void 0 ? void 0 : context.cancelDrag(true);
                    return;
                }
                else if (event.key === "ArrowUp") {
                    // Move item up
                    event.preventDefault();
                    context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(-1, itemLabel);
                    return;
                }
                else if (event.key === "ArrowDown") {
                    // Move item down
                    event.preventDefault();
                    context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(1, itemLabel);
                    return;
                }
            } },
            React.createElement(DragVerticalIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
        active && (React.createElement("button", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down", type: "button", onClick: () => context === null || context === void 0 ? void 0 : context.onKeyboardDragEnd(1, itemLabel), onMouseDown: (e) => e.preventDefault(), disabled: ((_c = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _c === void 0 ? void 0 : _c.index) === (context === null || context === void 0 ? void 0 : context.itemAmount) - 1 },
            React.createElement(CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.8rem" })))));
});
//# sourceMappingURL=DragAndDropDragHandler.js.map