import { jsx, jsxs } from "react/jsx-runtime";
import { Column } from "../../../layouts/index.js";
import { memo, useCallback } from "react";
import { FieldError, FieldHelpText, FieldLabel, SelectInput } from "../NodePropertiesPanel.styles.js";
const SelectField_SelectField = /*#__PURE__*/ memo(function({ field, value, onChange, error }) {
    const handleChange = useCallback((e)=>{
        onChange(e.target.value);
    }, [
        onChange
    ]);
    return /*#__PURE__*/ jsxs(Column, {
        gap: 4,
        children: [
            /*#__PURE__*/ jsx(FieldLabel, {
                children: field.label
            }),
            /*#__PURE__*/ jsxs(SelectInput, {
                className: "nodrag",
                value: value || field.defaultValue || '',
                onChange: handleChange,
                disabled: field.disabled,
                hasError: !!error,
                children: [
                    field.placeholder && /*#__PURE__*/ jsx("option", {
                        value: "",
                        disabled: true,
                        children: field.placeholder
                    }),
                    field.options?.map((option)=>/*#__PURE__*/ jsx("option", {
                            value: option.value,
                            children: option.label
                        }, option.value))
                ]
            }),
            field.helpText && /*#__PURE__*/ jsx(FieldHelpText, {
                children: field.helpText
            }),
            error && /*#__PURE__*/ jsx(FieldError, {
                children: error
            })
        ]
    });
});
export { SelectField_SelectField as SelectField };
