"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Palette = exports.PALETTE_DRAGGABLE_PREFIX = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const dom_1 = require("@dnd-kit/dom");
const react_1 = require("@dnd-kit/react");
const uikit_1 = require("@gravity-ui/uikit");
const FormContext_1 = require("../../hooks/FormContext.js");
const cn_1 = require("../../utils/cn.js");
const fieldMeta_1 = require("../../utils/fieldMeta.js");
const b = (0, cn_1.formBuilderV2Cn)('palette');
exports.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 = [
    dom_1.PointerSensor.configure({
        activationConstraints: [new dom_1.PointerActivationConstraints.Distance({ value: DRAG_DISTANCE })],
    }),
];
const PaletteTile = ({ type, label, icon, onClick }) => {
    const { ref, handleRef, isDragging } = (0, react_1.useDraggable)({
        id: `${exports.PALETTE_DRAGGABLE_PREFIX}${type}`,
        data: { kind: 'palette', type },
        sensors: paletteSensors,
    });
    const setRefs = React.useCallback((element) => {
        ref(element);
        handleRef(element);
    }, [ref, handleRef]);
    return ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { content: label, placement: "right", openDelay: 500, children: (0, jsx_runtime_1.jsxs)(uikit_1.Button, { ref: setRefs, view: "flat", size: "m", className: b('tile', { dragging: isDragging }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon, size: 18 }), (0, jsx_runtime_1.jsx)("span", { className: b('tile-label'), children: label })] }) }));
};
const Palette = () => {
    const { addField, addFieldToSection, formFields, selectedFieldId } = (0, FormContext_1.useFormContext)();
    const containerId = React.useMemo(() => findContainerId(formFields, selectedFieldId), [formFields, selectedFieldId]);
    const handleAdd = (type) => {
        if (containerId) {
            addFieldToSection(containerId, type);
        }
        else {
            addField(type);
        }
    };
    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(), view: "outlined", children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-2", children: "Add field" }), (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "caption-1", color: "hint", children: "Click to add, or drag onto the canvas to drop at a specific position." })] }), (0, jsx_runtime_1.jsx)("div", { className: b('items'), children: fieldMeta_1.FIELD_TYPES.map((type) => ((0, jsx_runtime_1.jsx)(PaletteTile, { type: type, label: fieldMeta_1.PALETTE_LABELS[type], icon: fieldMeta_1.TYPE_ICONS[type], onClick: () => handleAdd(type) }, type))) })] }));
};
exports.Palette = Palette;
//# sourceMappingURL=Palette.js.map
