"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ReferralCode", {
    enumerable: true,
    get: function() {
        return ReferralCode;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _icon = require("../../../icon");
const _input = require("../../../input");
const _provider = require("../../../provider");
const _utils = require("../../../utils");
const _react = require("react");
const ReferralCode = (props)=>{
    const { className, refCode, setRefCode, isExist } = props;
    const { referral } = (0, _react.useContext)(_provider.OrderlyAppContext);
    const localRefCode = localStorage.getItem("referral_code");
    const inputRef = (0, _react.useRef)(null);
    (0, _react.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 = (0, _react.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 = (0, _react.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__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _utils.cn)("orderly-text-2xs orderly-text-base-contrast-80", props.className),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                children: "Referral code (optional)"
            }),
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: "orderly-pt-3",
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_input.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__*/ (0, _jsxruntime.jsx)("button", {
                        className: "orderly-mr-2",
                        onClick: (e)=>{
                            e.stopPropagation();
                            setRefCode("");
                        },
                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icon.CircleCloseIcon, {
                            size: 18,
                            fillOpacity: 1,
                            className: "orderly-fill-base-contrast-20 hover:orderly-fill-base-contrast-54"
                        })
                    })
                })
            })
        ]
    });
};

//# sourceMappingURL=referralCode.js.map