import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { getIcon } from "../icon/config.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { FormMessageContainer } from "./FormMessageContainer.js";
import { Label } from "./Label.js";
import { TextFieldContainer } from "./TextFieldContainer.js";
import { getFormConfig } from "./formConfig.js";
import { nativeSelect, nativeSelectContainer } from "./nativeSelectStyles.js";
/**
 * This component is a wrapper for the native `<select>` field that applies the
 * same theming as `TextField` and `TextArea` components. This component might
 * not be used much since the `Select` offers more styling options.
 *
 * @example Simple Example
 * ```tsx
 * <NativeSelect label="Label">
 *   <option value="a">Value 1</option>
 *   <option value="b">Value 2</option>
 *   <option value="c">Value 3</option>
 *   <option value="d">Value 4</option>
 * </NativeSelect>
 * ```
 *
 * @example Required Value Example
 * ```tsx
 * function Example(): ReactElement {
 *   // using `defaultValue=""` makes it so the first option selected by default
 *   // and considered an "invalid" value since it is `disabled`
 *   //
 *   // a `name` must be set with `required` so that the form validation will
 *   // fire if the value is still the empty string when the form is submitted
 *   //
 *   // the first `<option>` is kind of like placeholder text since it doesn't
 *   // have a value and is disabled by default
 *
 *   return (
 *     <NativeSelect
 *       label="State"
 *       name="state"
 *       required
 *       defaultValue=""
 *     >
 *       <option value="" disabled>Choose a state</option>
 *       {states.map(({ name, code }) => (
 *         <option key={code} value={code}>{name}</option>
 *       ))}
 *     </NativeSelect>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/native-select | NativeSelect Demos}
 */ export const NativeSelect = /*#__PURE__*/ forwardRef(function NativeSelect(props, ref) {
    const { id: propId, style, className, icon: propIcon, label, labelProps, labelStyle, labelClassName, selectStyle, selectClassName, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, dense, error, active, inline, leftAddon, rightAddon: propRightAddon, leftAddonProps, rightAddonProps, disableLeftAddonStyles, disableRightAddonStyles, theme: propTheme, underlineDirection: propUnderlineDirection, messageProps, messageContainerProps, containerProps, children, ...remaining } = props;
    const { disabled, readOnly, multiple } = props;
    const id = useEnsuredId(propId, "select");
    const theme = getFormConfig("theme", propTheme);
    const underlineDirection = getFormConfig("underlineDirection", propUnderlineDirection);
    const icon = getIcon("dropdown", propIcon);
    const underlined = theme === "underline" || theme === "filled";
    let rightAddon = propRightAddon;
    if (typeof propRightAddon === "undefined" && !multiple) {
        rightAddon = icon;
    }
    return /*#__PURE__*/ _jsx(FormMessageContainer, {
        inline: inline,
        ...messageContainerProps,
        messageProps: messageProps && {
            error,
            theme,
            ...messageProps
        },
        children: /*#__PURE__*/ _jsxs(TextFieldContainer, {
            ...containerProps,
            style: style,
            className: nativeSelectContainer({
                label: !!label,
                multiple,
                underlined,
                className
            }),
            theme: theme,
            label: !!label,
            error: error,
            dense: dense,
            inline: inline,
            active: active,
            readOnly: readOnly,
            disabled: disabled,
            leftAddon: leftAddon,
            leftAddonProps: leftAddonProps,
            rightAddon: rightAddon,
            rightAddonProps: rightAddonProps,
            underlineDirection: underlineDirection,
            disableLeftAddonStyles: disableLeftAddonStyles,
            disableRightAddonStyles: disableRightAddonStyles,
            children: [
                /*#__PURE__*/ _jsx("select", {
                    ...remaining,
                    id: id,
                    ref: ref,
                    autoComplete: autoComplete,
                    name: name,
                    disabled: disabled,
                    style: selectStyle,
                    className: nativeSelect({
                        icon: !!icon,
                        className: selectClassName
                    }),
                    children: children
                }),
                label && /*#__PURE__*/ _jsx(Label, {
                    ...labelProps,
                    htmlFor: id,
                    style: labelProps?.style ?? labelStyle,
                    className: labelProps?.className ?? labelClassName,
                    floating: true,
                    dense: dense,
                    error: error,
                    active: active,
                    disabled: disabled,
                    children: label
                })
            ]
        })
    });
});

//# sourceMappingURL=NativeSelect.js.map