'use strict';

var React = require('react');
var FormField = require('../FormField-cjs.js');
require('classnames');
require('../tslib.es6-cjs.js');
require('react-hook-form');
require('@jobber/hooks');
require('framer-motion');
require('@jobber/design');
require('../Button-cjs.js');
var filterDataAttributes = require('../filterDataAttributes-cjs.js');
require('../Icon-cjs.js');
require('../Text-cjs.js');
require('../Typography-cjs.js');
require('../useFormFieldFocus-cjs.js');
require('../InputValidation-cjs.js');
require('../Spinner-cjs.js');
require('react-router-dom');

const validationMessage = "Please enter a valid email";

function InputEmail$1(props) {
    const { validations } = props;
    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
    function checkForValidEmail(value) {
        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!value) {
            return true;
        }
        if (!value.match(emailRegex)) {
            return validationMessage;
        }
        return true;
    }
}

function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, onKeyUp, }) {
    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);
    }
    return {
        handleClear,
        handleChange,
        handleKeyDown,
        handleKeyUp,
        handleFocus,
        handleBlur,
    };
}

const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
    var _a, _b, _c;
    const generatedId = React.useId();
    const id = props.id || generatedId;
    const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
    const wrapperRef = React.useRef(null);
    const { inputStyle } = FormField.useFormFieldWrapperStyles({
        size: props.size,
        inline: props.inline,
        align: props.align,
        type: "email",
        value: props.value,
        invalid: props.invalid,
        error: props.error,
        disabled: props.disabled,
        placeholder: props.placeholder,
    });
    const { name } = FormField.useAtlantisFormFieldName({
        nameProp: props.name,
        id,
    });
    const { handleChange, handleBlur, handleFocus, handleKeyDown, handleKeyUp, handleClear, } = useInputEmailActions({
        onChange: props.onChange,
        onBlur: props.onBlur,
        onFocus: props.onFocus,
        onKeyDown: props.onKeyDown,
        onKeyUp: props.onKeyUp,
        onEnter: props.onEnter,
        inputRef,
    });
    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(FormField.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: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, name: name },
        React.createElement("input", Object.assign({ id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, 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, "data-testid": "ATL-InputEmail-input" }, dataAttrs)),
        React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false })));
});

function isNewInputEmailProps(props) {
    return props.version === 2;
}
const InputEmail = React.forwardRef(function InputEmailShim(props, ref) {
    if (isNewInputEmailProps(props)) {
        return (React.createElement(InputEmailRebuilt, Object.assign({}, props, { ref: ref })));
    }
    else {
        return React.createElement(InputEmail$1, Object.assign({}, props));
    }
});

exports.InputEmail = InputEmail;
