'use strict';

var React = require('react');
var classnames = require('classnames');
var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
require('./Button-cjs.js');
require('@jobber/design');
var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
var mergeRefs = require('./mergeRefs-cjs.js');
var filterDataAttributes = require('./filterDataAttributes-cjs.js');

function SelectOption({ children, disabled, value }) {
    return (React.createElement("option", { disabled: disabled, value: value }, children));
}

/**
 * Hook with actions on the Select component.
 */
function useSelectActions({ onChange, onBlur, onFocus, }) {
    function handleChange(event) {
        const newValue = event.currentTarget.value;
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
    }
    function handleBlur(event) {
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
    }
    function handleFocus(event) {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
    }
    return {
        handleChange,
        handleBlur,
        handleFocus,
    };
}

var styles = {"select":"Bm9c8--1XKs-","selectPostfix":"LBiZF2RZlxc-","spinning":"oMOHhBwUzbs-"};

function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
    return (React.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
}

function LegacySelect(props) {
    var _a;
    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
    const generatedId = React.useId();
    const id = props.id || generatedId;
    const descriptionIdentifier = `descriptionUUID--${id}`;
    const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({
        nameProp: props.name,
        id: id,
    });
    const { handleChange, handleBlur, handleFocus } = useSelectActions({
        onChange: props.onChange,
        onBlur: props.onBlur,
        onFocus: props.onFocus,
    });
    const descriptionVisible = props.description && !props.inline;
    const isInvalid = Boolean(props.error || props.invalid);
    return (React.createElement(FormFieldWrapper.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
        React.createElement(React.Fragment, null,
            React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, required: props.required, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
                    ? descriptionIdentifier
                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormFieldWrapper.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
            React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
}
function useSelectRefs(inputRef) {
    const internalRef = React.useRef(null);
    const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
    const wrapperRef = React.useRef(null);
    return { mergedRef, wrapperRef };
}
LegacySelect.Option = SelectOption;
LegacySelect.OptionGroup = OptionGroup;

exports.LegacySelect = LegacySelect;
exports.SelectOption = SelectOption;
