import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
// import "./styles/UserInviteInfo.less";
import { Button, Col, Input, Modal, Row } from "antd";
import { Clipboard } from "../../Components/Icons/Clipboard";
import { ContentLayout } from "../../Components/ContentLayout";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { CrossCircle } from "../../Components/Icons/CrossCircle";
import { useAppState } from "../../overmind";
import { useState } from "react";
const UserInviteInfo = ({ invitedUsername, setStatus, form, hash, }) => {
    const state = useAppState();
    const [visible, setVisible] = useState(true);
    const [showCopyText, setShowCopyText] = useState(false);
    const user = state.api.auth.user;
    const numberOfInvites = user.availableInvites || 6;
    return (_jsx(Modal, { closeIcon: _jsx(CrossCircle, {}), visible: visible, footer: null, className: "nl-white-box-modal", onCancel: () => {
            setStatus("start");
            setVisible(false);
            form.resetFields();
        }, children: _jsx(ContentLayout, { children: _jsxs(Row, { className: "text-center user-invite-info_modal-root-row", children: [_jsxs(Row, { style: { flexDirection: "column-reverse" }, children: [_jsx(Col, { className: "user-invite-info_modal-center-text-col", children: invitedUsername && _jsxs("p", { className: "header-1 text-center", children: ["you invited ", invitedUsername] }) }), _jsx(Col, { className: "user-invite-info_modal-center-text-col", children: _jsxs("p", { className: "header-1b text-center", children: [numberOfInvites, " invites left"] }) })] }), _jsxs(Col, { className: "user-invite-info_modal-footer-col", children: [hash && showCopyText ? (_jsx("div", { style: { position: "relative", cursor: "pointer" }, children: _jsxs(Row, { children: [_jsx(Input, { type: "primary", className: "nl-user-unvite-input-hash", 
                                            // @ts-ignore
                                            placeholder: hash }), _jsx("span", { style: { position: "absolute", bottom: "11px", right: "0px" }, children: _jsx(Clipboard, { fill: "#d7ff65" }) }), _jsx("div", { style: { position: "absolute", top: "43px" }, children: _jsx("p", { className: "paragraph-3r", style: { color: "#d7ff65" }, children: "Copied to clipboard!" }) })] }) })) : (_jsx(CopyToClipboard, { text: window.location.origin + `?invite=${hash}`, children: _jsx(Button, { type: "primary", className: "u-margin-top-large", onClick: () => {
                                        setShowCopyText(true);
                                    }, children: "Get an invite link" }) })), _jsx(Button, { type: "primary", className: "u-margin-top-large", onClick: () => {
                                    setStatus("start");
                                    setVisible(false);
                                    form.resetFields();
                                }, children: "Invite a friend" }), _jsxs("p", { className: "text-left paragraph-2b u-margin-top-large", children: ["Need help? ", _jsx("span", { className: "paragraph-2u", children: "Join our telegram group" })] })] })] }) }) }));
};
export default UserInviteInfo;
//# sourceMappingURL=UserInviteInfo.js.map