import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
import { _ as __rest } from '../tslib.es6-es.js';
import classnames from 'classnames';
import { j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, k as FormField } from '../FormField-es.js';
import { useFormContext, useForm } from 'react-hook-form';
import '../Button-es.js';
import '@jobber/design';
import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
import '@jobber/hooks';
import 'framer-motion';
import '../Icon-es.js';
import '../Text-es.js';
import '../Typography-es.js';
import '../useFormFieldFocus-es.js';
import '../InputValidation-es.js';
import '../Spinner-es.js';
import 'react-router-dom';

var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};

function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
    const [isMasking, setIsMasking] = useState(!value);
    const patternInfo = useMemo(() => {
        const patternChars = pattern.split("");
        const specialChars = patternChars.filter(char => char !== delimiter);
        const maxCleanChars = patternChars.filter(char => char === delimiter).length;
        return {
            patternChars,
            specialChars,
            maxCleanChars,
        };
    }, [pattern, delimiter]);
    const inputValue = useMemo(() => {
        return value
            .split("")
            .filter(char => !patternInfo.specialChars.includes(char))
            .join("");
    }, [value, patternInfo.specialChars]);
    const formatValue = useCallback((unformattedValue) => {
        const { patternChars, specialChars, maxCleanChars } = patternInfo;
        const cleanValueChars = unformattedValue
            .split("")
            .filter(char => !specialChars.includes(char) && !Number.isNaN(Number(char)));
        const isOverCharLimit = cleanValueChars.length > maxCleanChars;
        if (!strict && isOverCharLimit) {
            return cleanValueChars.join("");
        }
        else {
            const formattedValue = patternChars.reduce(getMaskedValue([...cleanValueChars], specialChars), "");
            return formattedValue;
        }
    }, [patternInfo, strict]);
    const maskedOnChange = useCallback((newValue, event) => {
        const formatted = formatValue(newValue);
        onChange === null || onChange === void 0 ? void 0 : onChange(formatted, event);
    }, [formatValue, onChange]);
    const formattedValue = useMemo(() => formatValue(value), [formatValue, value]);
    useEffect(() => {
        const shouldMask = strict || inputValue.length < patternInfo.maxCleanChars;
        setIsMasking(shouldMask);
    }, [inputValue, patternInfo.maxCleanChars, strict]);
    const placeholderMask = useMemo(() => pattern
        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
        .slice(value.length), [pattern, delimiter, value]);
    return {
        formattedValue,
        placeholderMask,
        isMasking,
        maskedOnChange,
        inputValue,
    };
}
function getMaskedValue(cleanVal, specialChars) {
    return (result, nextCharacter) => {
        if (!cleanVal.length)
            return result;
        if (specialChars.includes(nextCharacter))
            return result + nextCharacter;
        const nextValue = cleanVal.shift();
        return result + (nextValue !== undefined ? nextValue : "");
    };
}

function MaskElement({ isMasking, formattedValue, placeholderMask, }) {
    if (!isMasking) {
        return null;
    }
    return (React__default.createElement("div", { className: styles.mask, "aria-hidden": "true" },
        React__default.createElement("span", { className: styles.hiddenValue }, formattedValue),
        React__default.createElement("span", null, placeholderMask)));
}
function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
    const { value: inputValue, onChange } = children.props;
    const { placeholderMask, isMasking, formattedValue, maskedOnChange } = useInputMask({
        value: String(inputValue || ""),
        pattern,
        delimiter,
        strict,
        onChange: onChange,
    });
    const inputMask = (React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }));
    return cloneElement(children, {
        onChange: maskedOnChange,
        children: isMasking && inputMask,
    });
}

const DEFAULT_PATTERN = "(***) ***-****";

/**
 * Combines the actions on the InputPhoneNumber such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputPhoneNumber.
 * Do not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
 */
function useInputPhoneActions({ onChange, inputRef, onFocus, onBlur, onKeyDown, onEnter, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, }) {
    function handleClear() {
        var _a;
        onChange && 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 handleFocus(event) {
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(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 handleBlur(event) {
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(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,
        handleFocus,
        handleBlur,
        handleKeyDown,
        handleClick,
        handleMouseDown,
        handleMouseUp,
        handlePointerDown,
        handlePointerUp,
    };
}

const InputPhoneNumberRebuilt = forwardRef(function InputPhoneNumberInternal(_a, ref) {
    var _b, _c, _d, _e;
    var { pattern = DEFAULT_PATTERN } = _a, props = __rest(_a, ["pattern"]);
    const inputPhoneNumberRef = (_b = ref) !== null && _b !== void 0 ? _b : React__default.useRef(null);
    const wrapperRef = React__default.useRef(null);
    const { inputStyle } = useFormFieldWrapperStyles({
        size: props.size,
        align: props.align,
        placeholder: props.placeholder,
        value: props.value,
        invalid: props.invalid,
        error: props.error,
        disabled: props.disabled,
        inline: props.inline,
        type: "tel",
    });
    const generatedId = useId();
    const id = props.id || generatedId;
    const { name } = useAtlantisFormFieldName({
        nameProp: props.name,
        id: id,
    });
    const { formattedValue, isMasking, placeholderMask, inputValue, maskedOnChange, } = useInputMask({
        value: props.value,
        pattern,
        strict: false,
        onChange: props.onChange,
    });
    const { handleChange, handleBlur, handleFocus, handleClear, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputPhoneActions({
        onChange: maskedOnChange,
        onBlur: props.onBlur,
        onFocus: props.onFocus,
        onEnter: props.onEnter,
        onKeyDown: props.onKeyDown,
        onClick: props.onClick,
        onMouseDown: props.onMouseDown,
        onMouseUp: props.onMouseUp,
        onPointerDown: props.onPointerDown,
        onPointerUp: props.onPointerUp,
        inputRef: inputPhoneNumberRef,
    });
    const descriptionIdentifier = `descriptionUUID--${id}`, descriptionVisible = props.description && !props.inline;
    const isInvalid = Boolean(props.error || props.invalid);
    const dataAttrs = filterDataAttributes(props);
    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, inline: props.inline, wrapperRef: wrapperRef, error: (_c = props.error) !== null && _c !== void 0 ? _c : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_d = props.clearable) !== null && _d !== void 0 ? _d : "never", onClear: handleClear, type: "tel", placeholder: props.placeholder, value: formattedValue, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, loading: props.loading },
        React__default.createElement("input", Object.assign({ id: id, name: name, type: "tel", ref: inputPhoneNumberRef, className: classnames(inputStyle, {
                [styles.emptyValue]: inputValue.length === 0 && pattern[0] === "(",
            }), value: formattedValue, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, 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, onClick: handleClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }, dataAttrs)),
        React__default.createElement(MaskElement, { isMasking: isMasking, formattedValue: formattedValue, placeholderMask: placeholderMask }),
        React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_e = props.loading) !== null && _e !== void 0 ? _e : false })));
});

function InputPhoneNumber$1(_a) {
    var { required } = _a, props = __rest(_a, ["required"]);
    const { placeholder, validations, pattern = DEFAULT_PATTERN } = props;
    const errorSubject = placeholder || "Phone number";
    const { getValues } = useFormContext() != undefined
        ? useFormContext()
        : // If there isn't a Form Context being provided, get a form for this field.
            useForm({ mode: "onTouched" });
    return (React__default.createElement(InputMask, { pattern: pattern, strict: false },
        React__default.createElement(FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
                    value: Boolean(required),
                    message: `${errorSubject} is required`,
                } }, validations), { validate: getPhoneNumberValidation }) }))));
    function getPhoneNumberValidation(value) {
        // Get unique characters that aren't * in the pattern
        const patternNonDelimterCharacters = pattern
            .split("")
            .filter(char => char !== "*")
            .filter((char, index, arr) => arr.indexOf(char) === index);
        const specialCharacters = patternNonDelimterCharacters.join(" ");
        // Remove special characters from pattern
        const cleanValue = value.replace(new RegExp(`[${specialCharacters}]`, "g"), "");
        const cleanValueRequiredLength = (pattern.match(/\*/g) || []).length;
        if (cleanValue.length > 0 && cleanValue.length < cleanValueRequiredLength) {
            return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
        }
        if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
            return validations.validate(value, getValues);
        }
        return true;
    }
}

function isNewInputPhoneNumberProps(props) {
    return props.version === 2;
}
const InputPhoneNumber = forwardRef(function InputPhoneNumberShim(props, ref) {
    if (isNewInputPhoneNumberProps(props)) {
        return React__default.createElement(InputPhoneNumberRebuilt, Object.assign({}, props, { ref: ref }));
    }
    else {
        return React__default.createElement(InputPhoneNumber$1, Object.assign({}, props));
    }
});

export { InputPhoneNumber };
