import { noop } from "es-toolkit";
import { createContext, useContext, } from "react";
import { cx } from "../../../utils";
import * as styles from "./dragHandle.css";
export let DragHandelContext = createContext({
    onPointerDown: noop,
    onResize: noop,
});
/**
 * A draggable handle component used to resize grid tracks.
 * Supports both pointer dragging and keyboard navigation (Arrow keys).
 *
 * @param props - Component props.
 * @returns The rendered drag handle button.
 */
export let DragHandel = ({ index, className = "", orientation, style = {}, ...props }) => {
    let { onPointerDown, onResize } = useContext(DragHandelContext);
    let handleKeyDown = (event) => {
        if (!(event.key === "ArrowLeft" ||
            event.key === "ArrowRight" ||
            event.key === "ArrowUp" ||
            event.key === "ArrowDown")) {
            return;
        }
        let movementX = event.key === "ArrowLeft" ? -8 : event.key === "ArrowRight" ? 8 : 0;
        let movementY = event.key === "ArrowUp" ? -8 : event.key === "ArrowDown" ? 8 : 0;
        let payload = {
            movementX,
            movementY,
            clickTarget: event.currentTarget,
        };
        onResize(payload);
    };
    let type = orientation === "vertical" ? "col" : "row";
    return (<div className={cx(styles.dragHandelContainer, className)} style={style}>
			<button {...props} tabIndex={0} data-orientation={orientation} className={cx(styles.dragHandelButton, styles.dragHandelButtonVariant[orientation], "drag-handel", `drag-handel-${type}-${index}`)} data-index={index} onKeyDown={handleKeyDown} onPointerDown={onPointerDown}>
				<div className={cx(styles.dragHandel, styles.dragHandelVariant[orientation])}/>
			</button>
		</div>);
};