/**
 * Options List Editor component
 * For adding/removing options in Radio, Combo/Dropdown fields
 * Values are auto-generated from labels
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { IoAdd, IoClose } from 'react-icons/io5';
import { cn } from '../../../utils/cn.js';
/**
 * Generate a unique value from label (snake_case)
 * Makes it unique by adding a suffix if needed
 */
function generate_value_from_label(label, existing_values, current_index) {
    const base_value = label
        .toLowerCase()
        .trim()
        .replace(/\s+/g, '_')
        .replace(/[^a-z0-9_]/g, '') || `option_${current_index + 1}`;
    // Check if this value already exists (excluding current index)
    let value = base_value;
    let suffix = 1;
    while (existing_values.some((v, i) => i !== current_index && v === value)) {
        suffix++;
        value = `${base_value}_${suffix}`;
    }
    return value;
}
export function OptionsListEditor({ options, on_options_change, label = 'Options', min_options = 1, max_options = 10, label_placeholder = 'Option label', }) {
    // Add a new option
    const handle_add_option = useCallback(() => {
        if (options.length >= max_options)
            return;
        const new_index = options.length + 1;
        const existing_values = options.map(o => o.value);
        const new_option = {
            label: `Option ${new_index}`,
            value: generate_value_from_label(`Option ${new_index}`, existing_values, options.length),
        };
        on_options_change([...options, new_option]);
    }, [options, max_options, on_options_change]);
    // Remove an option by index
    const handle_remove_option = useCallback((index) => {
        if (options.length <= min_options)
            return;
        const new_options = options.filter((_, i) => i !== index);
        on_options_change(new_options);
    }, [options, min_options, on_options_change]);
    // Update option label (value is auto-generated)
    const handle_label_change = useCallback((index, new_label) => {
        const existing_values = options.map(o => o.value);
        const new_options = [...options];
        new_options[index] = {
            label: new_label,
            value: generate_value_from_label(new_label, existing_values, index),
        };
        on_options_change(new_options);
    }, [options, on_options_change]);
    const can_add = options.length < max_options;
    const can_remove = options.length > min_options;
    return (_jsxs("div", { className: "cls_options_list_editor space-y-3", children: [_jsx("label", { className: "text-sm font-medium leading-none", children: label }), _jsx("div", { className: "space-y-2", children: options.map((option, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "text", value: option.label, onChange: e => handle_label_change(index, e.target.value), placeholder: label_placeholder, className: "flex-1 h-9 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" }), _jsx("button", { type: "button", onClick: () => handle_remove_option(index), disabled: !can_remove, className: cn('flex h-9 w-9 items-center justify-center rounded-md border border-input transition-colors', can_remove
                                ? 'hover:bg-destructive/10 hover:text-destructive hover:border-destructive'
                                : 'opacity-30 cursor-not-allowed'), title: can_remove ? 'Remove option' : `Minimum ${min_options} option(s) required`, children: _jsx(IoClose, { className: "h-4 w-4" }) })] }, index))) }), _jsxs("button", { type: "button", onClick: handle_add_option, disabled: !can_add, className: cn('flex items-center gap-1 text-sm font-medium transition-colors', can_add
                    ? 'text-primary hover:text-primary/80'
                    : 'text-muted-foreground cursor-not-allowed'), children: [_jsx(IoAdd, { className: "h-4 w-4" }), "Add option", !can_add && ` (max ${max_options})`] })] }));
}
//# sourceMappingURL=options_list_editor.js.map