import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../utils/cn.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function OptionField(props) {
    const { field, mode, value, config, on_change, on_blur } = props;
    const string_value = value != null ? String(value) : '';
    const options = field.input_options || [];
    const field_style = config.style_resolver.has_style(mode === 'view' ? 'field_view' : 'field')
        ? config.style_resolver.to_style(mode === 'view' ? 'field_view' : 'field')
        : undefined;
    // Find display label for view mode
    const display_label = options.find(o => o.value === string_value)?.label || string_value;
    return (_jsx(DataFormFieldLayout, { ...props, children: mode === 'edit' ? (_jsxs("select", { className: cn('cls_data_form_option_input', 'w-full'), style: field_style, value: string_value, disabled: field.disabled, onChange: (e) => on_change(e.target.value), onBlur: on_blur, children: [_jsx("option", { value: "", children: field.placeholder || 'Select...' }), options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })) : (_jsx("div", { className: "cls_data_form_option_view", style: field_style, children: display_label || '\u00A0' })) }));
}
//# sourceMappingURL=option_field.js.map