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, useRef } from "react";
export const ReferralCode = (props)=>{
    const { className, refCode, setRefCode } = 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
    ]);
    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,
                    containerClassName: "orderly-h-[40px] orderly-bg-base-700",
                    value: refCode,
                    onChange: (e)=>setRefCode(e.target.value),
                    autoFocus: true,
                    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