import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from 'react';
import { FormDescription } from '../../../../scalars/components/fragments/form-description/index.js';
import { FormGroup } from '../../../../scalars/components/fragments/form-group/index.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/index.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
import { Input } from '../input/index.js';
import { useUniqueId } from '../../../../scalars/lib/utils.js';
import useControllableState from '../../../hooks/use-controllable-state.js';
import { EmailInputDiff } from './subcomponents/email-input-diff.js';
const EmailInput = React.forwardRef(({ name, label, description, required, disabled = false, warnings, errors, value, defaultValue, autoComplete, id: propId, onChange, onBlur, baseValue, viewMode = 'edition', ...props }, ref) => {
    const [emailValue, handleChange] = useControllableState({
        value,
        defaultValue,
        onChange,
    });
    const prefix = useUniqueId();
    const id = propId ?? `${prefix}-email`;
    const autoCompleteValue = autoComplete === true ? 'email' : autoComplete === false ? 'off' : undefined;
    // Filter maxLength from props since it's avoid default browser behavior
    const filteredProps = useMemo(() => Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'maxLength')), [props]);
    if (viewMode === 'edition') {
        return (_jsxs(FormGroup, { children: [_jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, hasError: !!errors?.length, children: label }), _jsx(Input, { name: name, value: emailValue ?? '', onChange: handleChange, onBlur: onBlur, disabled: disabled, id: id, type: "email", autoComplete: autoCompleteValue, required: required, ref: ref, ...(label && { 'data-label': label }), ...filteredProps }), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
    }
    return (_jsx(EmailInputDiff, { label: label, baseValue: baseValue, value: emailValue ?? '', viewMode: viewMode, required: required }));
});
EmailInput.displayName = 'EmailInput';
export { EmailInput };
//# sourceMappingURL=email-input.js.map