import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { PointerActivationConstraints, PointerSensor } from '@dnd-kit/dom';
import { useDraggable } from '@dnd-kit/react';
import { Button, Card, Icon, Text, Tooltip } from '@gravity-ui/uikit';
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderV2Cn } from "../../utils/cn.js";
import { FIELD_TYPES, PALETTE_LABELS, TYPE_ICONS } from "../../utils/fieldMeta.js";
import './Palette.css';
const b = formBuilderV2Cn('palette');
export const PALETTE_DRAGGABLE_PREFIX = 'palette:';
const findContainerId = (fields, selectedId, parentSectionId = null) => {
    if (!selectedId)
        return null;
    for (const field of fields) {
        if (field.id === selectedId) {
            return field.type === 'section' ? field.id : parentSectionId;
        }
        if (field.type === 'section') {
            const nested = findContainerId(field.fields, selectedId, field.id);
            if (nested !== undefined)
                return nested;
        }
    }
    return undefined;
};
const DRAG_DISTANCE = 4;
const paletteSensors = [
    PointerSensor.configure({
        activationConstraints: [new PointerActivationConstraints.Distance({ value: DRAG_DISTANCE })],
    }),
];
const PaletteTile = ({ type, label, icon, onClick }) => {
    const { ref, handleRef, isDragging } = useDraggable({
        id: `${PALETTE_DRAGGABLE_PREFIX}${type}`,
        data: { kind: 'palette', type },
        sensors: paletteSensors,
    });
    const setRefs = React.useCallback((element) => {
        ref(element);
        handleRef(element);
    }, [ref, handleRef]);
    return (_jsx(Tooltip, { content: label, placement: "right", openDelay: 500, children: _jsxs(Button, { ref: setRefs, view: "flat", size: "m", className: b('tile', { dragging: isDragging }), onClick: onClick, children: [_jsx(Icon, { data: icon, size: 18 }), _jsx("span", { className: b('tile-label'), children: label })] }) }));
};
export const Palette = () => {
    const { addField, addFieldToSection, formFields, selectedFieldId } = useFormContext();
    const containerId = React.useMemo(() => findContainerId(formFields, selectedFieldId), [formFields, selectedFieldId]);
    const handleAdd = (type) => {
        if (containerId) {
            addFieldToSection(containerId, type);
        }
        else {
            addField(type);
        }
    };
    return (_jsxs(Card, { className: b(), view: "outlined", children: [_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: "subheader-2", children: "Add field" }), _jsx(Text, { variant: "caption-1", color: "hint", children: "Click to add, or drag onto the canvas to drop at a specific position." })] }), _jsx("div", { className: b('items'), children: FIELD_TYPES.map((type) => (_jsx(PaletteTile, { type: type, label: PALETTE_LABELS[type], icon: TYPE_ICONS[type], onClick: () => handleAdd(type) }, type))) })] }));
};
//# sourceMappingURL=Palette.js.map
