'use strict';

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

function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
    function handleClear() {
        var _a;
        onChange === null || onChange === void 0 ? void 0 : onChange("");
        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }
    function handleChange(event) {
        const newValue = event.currentTarget.value;
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
    }
    function handleKeyDown(event) {
        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
        if (!onEnter)
            return;
        if (event.key !== "Enter")
            return;
        if (event.shiftKey || event.ctrlKey)
            return;
        event.preventDefault();
        onEnter === null || onEnter === void 0 ? void 0 : onEnter(event);
    }
    function handleFocus(event) {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
    }
    function handleBlur(event) {
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
    }
    function handleKeyUp(event) {
        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
    }
    function handleClick(event) {
        onClick === null || onClick === void 0 ? void 0 : onClick(event);
    }
    function handleMouseDown(event) {
        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
    }
    function handleMouseUp(event) {
        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
    }
    function handlePointerDown(event) {
        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
    }
    function handlePointerUp(event) {
        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
    }
    return {
        handleClear,
        handleChange,
        handleKeyDown,
        handleKeyUp,
        handleFocus,
        handleBlur,
        handleClick,
        handleMouseDown,
        handleMouseUp,
        handlePointerDown,
        handlePointerUp,
    };
}

function useInputEmailRefs(inputRef) {
    const internalRef = React.useRef(null);
    const mergedRef = mergeRefs.mergeRefs([internalRef, inputRef]);
    return { internalRef, mergedRef };
}

const InputEmail = React.forwardRef(function InputEmailInternal(props, ref) {
    var _a, _b;
    const generatedId = React.useId();
    const id = props.id || generatedId;
    const { internalRef, mergedRef } = useInputEmailRefs(ref);
    const wrapperRef = React.useRef(null);
    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputEmailActions({
        onChange: props.onChange,
        onBlur: props.onBlur,
        onFocus: props.onFocus,
        onKeyDown: props.onKeyDown,
        onKeyUp: props.onKeyUp,
        onEnter: props.onEnter,
        onClick: props.onClick,
        onMouseDown: props.onMouseDown,
        onMouseUp: props.onMouseUp,
        onPointerDown: props.onPointerDown,
        onPointerUp: props.onPointerUp,
        inputRef: internalRef,
    });
    const descriptionIdentifier = `descriptionUUID--${id}`;
    const descriptionVisible = props.description && !props.inline;
    const isInvalid = Boolean(props.error || props.invalid);
    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
    return (React.createElement(FormFieldWrapper.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_a = props.clearable) !== null && _a !== void 0 ? _a : "never", onClear: handleClear, readonly: props.readOnly, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: props.name },
        React.createElement("input", Object.assign({ id: id, name: props.name, type: "email", ref: mergedRef, className: FormFieldWrapper.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, required: props.required, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible ? descriptionIdentifier : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
        React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "spinner", visible: (_b = props.loading) !== null && _b !== void 0 ? _b : false })));
});

exports.InputEmail = InputEmail;
