import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CircleCloseIcon } from "../../../icon";
import { Input } from "../../../input";
import { OrderlyAppContext } from "../../../provider";
import { cn } from "../../../utils";
import { useContext, useEffect, useMemo, useRef } from "react";
export const ReferralCode = (props)=>{
    const { className, refCode, setRefCode, isExist } = props;
    const { referral } = useContext(OrderlyAppContext);
    const localRefCode = localStorage.getItem("referral_code");
    const inputRef = useRef(null);
    useEffect(()=>{
        if (referral?.saveRefCode === true && inputRef) {
            inputRef?.current?.focus();
            inputRef?.current?.setSelectionRange(inputRef?.current.value.length, inputRef.current.value.length);
        }
    }, [
        referral?.saveRefCode,
        refCode,
        inputRef
    ]);
    const errorInfo = useMemo(()=>{
        const length = refCode?.length || 0;
        if (length === 0) return "";
        if (length < 4 || length > 10) {
            return "The referral_code must be 4 to 10 characters long, only accept upper case roman characters and numbers";
        }
        return isExist ? "" : "This referral code does not exist.";
    }, [
        refCode
    ]);
    const isError = useMemo(()=>{
        const length = refCode?.length || 0;
        if (length === 0) return false;
        if (length < 4 || length > 10) {
            return true;
        }
        return isExist === false;
    }, [
        refCode,
        isExist
    ]);
    if (referral?.saveRefCode !== true || (localRefCode?.length || 0) <= 0) return /*#__PURE__*/ _jsx(_Fragment, {});
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-text-2xs orderly-text-base-contrast-80", props.className),
        children: [
            /*#__PURE__*/ _jsx("div", {
                children: "Referral code (optional)"
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-pt-3",
                children: /*#__PURE__*/ _jsx(Input, {
                    ref: inputRef,
                    tooltipClassName: "orderly-max-w-[370px] desktop:orderly-max-w-[350px]",
                    containerClassName: "orderly-h-[40px] orderly-bg-base-700",
                    value: refCode,
                    onChange: (e)=>{
                        setRefCode(e.target.value.replace(/[^A-Z0-9]/g, ""));
                    },
                    error: isError,
                    helpText: errorInfo,
                    autoFocus: true,
                    autoComplete: "off",
                    suffix: /*#__PURE__*/ _jsx("button", {
                        className: "orderly-mr-2",
                        onClick: (e)=>{
                            e.stopPropagation();
                            setRefCode("");
                        },
                        children: /*#__PURE__*/ _jsx(CircleCloseIcon, {
                            size: 18,
                            fillOpacity: 1,
                            className: "orderly-fill-base-contrast-20 hover:orderly-fill-base-contrast-54"
                        })
                    })
                })
            })
        ]
    });
};

//# sourceMappingURL=referralCode.js.map