import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AppearingComponent } from "../../Components/Appearing";
import { Tag, Tooltip } from "antd";
import { ContentLayout } from "../../Components/ContentLayout";
import { Link } from "react-router-dom";
import { MaskedInput } from "antd-mask-input";
import { NextButton } from "./NextButton";
import { useEffect, useRef } from "react";
import { SpaceSpin } from "../../Components/Spin";
import { estimateUsernamePrice } from "../../utils/username";
import { isEmpty } from "lodash";
import { useActions, useAppState } from "../../overmind";
import Paragraph from "antd/lib/typography/Paragraph";
export const DomainSelector = () => {
    const actions = useActions();
    const state = useAppState();
    const fuia = state.flows.user.create.formUsernameIsAvailable;
    const isMetamaskFlow = state.flows.user.create.metamaskFlow;
    const el = useRef({});
    const username = state.flows.user.create.form.username || "";
    useEffect(() => {
        if (state.flows.user.create.isLegacyUpdateOngoing) {
            actions.flows.user.create.updateForm({ ...state.api.auth.user });
        }
    }, []);
    const domainPrice = () => estimateUsernamePrice(username);
    const isPaidUsername = () => {
        const len = username.replace(/\.io/, "").length;
        return len > 1 && len <= 5 && !state.api.auth.user?.subscriptionStatus?.startsWith("io-domain-sale");
    };
    const isOneChar = () => {
        const len = username.replace(/\.io/, "").length;
        return len === 1 && !state.api.auth.user?.subscriptionStatus?.startsWith("io-domain-sale");
    };
    return (_jsxs(ContentLayout, { children: [_jsx("div", { className: "nl-onboarding-title" }), _jsx("div", { className: "nl-onboarding-form", children: _jsx(MaskedInput, { ref: el, className: fuia === "unavailable" ? "nl-domain-presale__masked-input masked-input-error" : "nl-domain-presale__masked-input", defaultValue: state.flows.user.create.form.username?.replace(/\.io$/, "") || "", value: state.flows.user.create.form.username?.replace(/\.io$/, ""), size: "large", mask: "xxxxxxxxx.io", placeholderChar: "\u200C", onChange: (v) => {
                        actions.flows.user.create.updateForm({
                            username: v.target.value.replace(/\u200c/g, "").toLowerCase(),
                        });
                    }, formatCharacters: {
                        x: {
                            validate: function (char) {
                                return /^[a-zA-Z1-5\.]$/.test(char);
                            },
                        },
                    } }) }), _jsx(NextButton, { nextProps: isMetamaskFlow ? { command: actions.evm.sendSignedMessage, text: "Transfer to us via Metamask" } : undefined, visible: (!isMetamaskFlow && !(isEmpty(state.flows.user.create.form.username) || isOneChar())) ||
                    (isMetamaskFlow && fuia === "availableOnOpenSea"), contentDescription: !isMetamaskFlow && (_jsxs(_Fragment, { children: [fuia === "checking" && _jsx(SpaceSpin, { isRotating: fuia === "checking" }), fuia === "unavailable" && _jsxs(Tag, { className: "u-margin-top-medium flex-center", children: ["Name is ", fuia] }), _jsxs(Paragraph, { className: "paragraph-2r nl-domain-presale__footer-paragraph", children: [isOneChar() && !isMetamaskFlow ? (_jsxs(AppearingComponent, { seconds: 1, children: ["To purchase a one character domain please", " ", _jsx(Link, { className: "paragraph-2u nl-onboarding-link", to: "https://t.me/joinchat/Ezz_sQzaOK2j977siawwGQ", target: "_new", children: "contact us" }), "."] })) : (_jsx(_Fragment, {})), isPaidUsername() && !state.flows.user.create.legacyToken && !isMetamaskFlow ? (_jsxs(AppearingComponent, { seconds: 1, children: [_jsx("br", {}), state.config.featureFlags.onboarding.premiumDomains ? (_jsxs(_Fragment, { children: ["Premium usernames of 5 and fewer characters must be purchased.", _jsx("br", {}), "Estimated price: ", domainPrice(), _jsx("br", {}), "Click Next to continue."] })) : (_jsxs(_Fragment, { children: ["For early access please contact\u00A0", _jsx("a", { href: "https://t.me/joinchat/Ezz_sQzaOK2j977siawwGQ", target: "_new", children: "our support team" }), "."] }))] })) : (""), state.flows.user.create.legacyToken &&
                                    !isMetamaskFlow &&
                                    (state.flows.user.create.form.displayName !== state.flows.user.create.form.username || fuia === "unavailable") ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: _jsx(_Fragment, { children: "Your Newlife identity is now a part of the Newcoin ecosystem and provides access to many exciting services. You may keep your current username as the display name on Newlife on the next dialog." }), children: _jsx("span", { children: " Why is my username changing?" }) }), "\u00A0", _jsxs("a", { href: "/", onClick: () => actions.flows.user.create.stopLegacyImport(), children: ["I am not ", state.flows.user.create.legacyUsername] })] })) : ("")] }), "Welcome to newlife.IO! Choose your permanent domain name. This cannot be changed or deleted, and you own it. 9 characters max: a-z and 1-5"] })) })] }));
};
//# sourceMappingURL=DomainSelector.js.map