'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Input Options Editor - For Radio/Combo field options
 */
import { useCallback } from 'react';
import { HiPlus, HiTrash, HiArrowUp, HiArrowDown } from 'react-icons/hi';
import { cn } from '../../../../utils/cn.js';
export function InputOptionsEditor({ options, on_change, on_commit, readonly = false, }) {
    // Add new option
    const handle_add = useCallback(() => {
        const new_option = {
            label: `Option ${options.length + 1}`,
            value: `option_${options.length + 1}`,
        };
        on_change([...options, new_option]);
        on_commit();
    }, [options, on_change, on_commit]);
    // Remove option
    const handle_remove = useCallback((index) => {
        const updated = options.filter((_, i) => i !== index);
        on_change(updated);
        on_commit();
    }, [options, on_change, on_commit]);
    // Update option
    const handle_update = useCallback((index, field, value) => {
        const updated = [...options];
        updated[index] = { ...updated[index], [field]: value };
        // Auto-generate value from label if value is empty or matches old label pattern
        if (field === 'label') {
            const sanitized = value.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
            if (!updated[index].value || updated[index].value.startsWith('option_')) {
                updated[index].value = sanitized || `option_${index + 1}`;
            }
        }
        on_change(updated);
    }, [options, on_change]);
    // Move option up/down
    const handle_move = useCallback((index, direction) => {
        const new_index = direction === 'up' ? index - 1 : index + 1;
        if (new_index < 0 || new_index >= options.length)
            return;
        const updated = [...options];
        [updated[index], updated[new_index]] = [updated[new_index], updated[index]];
        on_change(updated);
        on_commit();
    }, [options, on_change, on_commit]);
    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h4", { className: "text-sm font-medium", children: "Options" }), _jsxs("button", { onClick: handle_add, disabled: readonly, className: cn('flex items-center gap-1 px-2 py-1 text-sm rounded border hover:bg-muted', readonly && 'opacity-50 cursor-not-allowed'), children: [_jsx(HiPlus, { className: "w-4 h-4" }), "Add Option"] })] }), options.length === 0 ? (_jsx("div", { className: "text-center py-4 text-muted-foreground text-sm border rounded-md bg-muted/30", children: "No options defined. Click \"Add Option\" to create one." })) : (_jsx("div", { className: "space-y-2", children: options.map((option, index) => (_jsxs("div", { className: "flex items-center gap-2 p-2 border rounded-md bg-background", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("button", { onClick: () => handle_move(index, 'up'), disabled: readonly || index === 0, className: "p-0.5 hover:bg-muted rounded disabled:opacity-30", title: "Move up", children: _jsx(HiArrowUp, { className: "w-3 h-3" }) }), _jsx("button", { onClick: () => handle_move(index, 'down'), disabled: readonly || index === options.length - 1, className: "p-0.5 hover:bg-muted rounded disabled:opacity-30", title: "Move down", children: _jsx(HiArrowDown, { className: "w-3 h-3" }) })] }), _jsx("input", { type: "text", value: option.label, onChange: (e) => handle_update(index, 'label', e.target.value), onBlur: on_commit, disabled: readonly, className: cn('flex-1 px-2 py-1 border rounded text-sm', 'focus:outline-none focus:ring-1 focus:ring-primary/50', readonly && 'bg-muted cursor-not-allowed'), placeholder: "Label" }), _jsx("input", { type: "text", value: option.value, onChange: (e) => handle_update(index, 'value', e.target.value), onBlur: on_commit, disabled: readonly, className: cn('w-32 px-2 py-1 border rounded text-sm font-mono', 'focus:outline-none focus:ring-1 focus:ring-primary/50', readonly && 'bg-muted cursor-not-allowed'), placeholder: "value" }), _jsx("button", { onClick: () => handle_remove(index), disabled: readonly, className: cn('p-1.5 text-destructive hover:bg-destructive/10 rounded', readonly && 'opacity-50 cursor-not-allowed'), title: "Remove option", children: _jsx(HiTrash, { className: "w-4 h-4" }) })] }, index))) })), _jsx("p", { className: "text-xs text-muted-foreground", children: "Define the available options for this field. The value is used internally, while the label is shown to users." })] }));
}
//# sourceMappingURL=input_options_editor.js.map