import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Col, Dropdown, Row } from "antd";
import { CrossCircle } from "./Icons/CrossCircle";
import { NCOLogo } from "./Icons/NCOLogo";
import { useEffect } from "react";
import { UserNewcoinPoolsParticipation } from "./UserWidget";
import { VerifiedIcon } from "./Icons/VerifiedIcon";
import { useActions, useAppState } from "../overmind";
import { useVerified } from "../hooks/useVerified";
const roundCurrency = (vals) => {
    const val = vals?.length ? vals[0] : " ";
    const [n, c] = val.split(/ /);
    return n.replace(/\.?0+$/, "") + " " + c;
};
export const Wallet = ({ walletShown }) => {
    const state = useAppState();
    const actions = useActions();
    const user = state.api.auth.user;
    const ncoBalance = state.newcoin.account;
    const gncoBalance = state.newcoin.mainPool;
    const { verifiedUsers } = useVerified([user.username || ""]);
    const isUserVerified = verifiedUsers && user.username && verifiedUsers.includes(user.username);
    if (!user)
        return _jsx(_Fragment, {});
    const rowGutter = !(ncoBalance.length === 0 && gncoBalance.length === 0) ? 0 : 24;
    // const walletShown = !!state.flows.userJourney.flags.walletShown;
    const setVisible = (value) => actions.flows.userJourney.setFlag({
        flag: "walletShown",
        value: value ? "true" : "",
    });
    return (_jsxs("div", { className: "nl-white-box", style: {
            minWidth: "min(450px, 100vh)",
            padding: 0,
        }, children: [_jsx("div", { style: { width: "100%", textAlign: "end", padding: "20px" }, children: _jsx("span", { onClick: () => setVisible(!walletShown), style: { cursor: "pointer", padding: "30px 10px 0px 20px" }, children: _jsx(CrossCircle, {}) }) }), _jsxs("div", { style: { padding: "0px 40px 40px 40px" }, children: [_jsxs("p", { className: "text-left header-3 u-margin-bottom-medium", children: [user.username, isUserVerified ? (_jsx("span", { className: "nl-wallet-verificationIcon", style: { position: "relative", padding: 10 }, children: _jsx(VerifiedIcon, { style: { position: "absolute" } }) })) : (false)] }), _jsxs(Row, { gutter: rowGutter, children: [_jsx(Col, { className: "text-left", style: {
                                    fontSize: 40,
                                    fontWeight: "bold",
                                }, children: roundCurrency(ncoBalance.acc_balances) }), _jsx(Col, { className: "text-left", style: {
                                    fontSize: 40,
                                    fontWeight: "bold",
                                }, children: roundCurrency(gncoBalance.acc_balances) })] })] }), _jsx("div", { className: "wallet-usernames-wrapper", children: _jsx(UserNewcoinPoolsParticipation, { user: user, isWalletUsage: true }) }), _jsx("br", {})] }));
};
export const WalletWidget = () => {
    const state = useAppState();
    const actions = useActions();
    const walletShown = !!state.flows.userJourney.flags.walletShown;
    const setVisible = (value) => actions.flows.userJourney.setFlag({
        flag: "walletShown",
        value: value ? "true" : "",
    });
    useEffect(() => {
        setVisible(false);
    }, []);
    return (_jsx("div", { children: _jsx(Dropdown, { visible: walletShown, 
            // onVisibleChange={(val) => setVisible(val)}
            overlayStyle: {}, overlay: _jsx(Wallet, { walletShown: walletShown }), children: _jsx("div", { onClick: () => setVisible(!walletShown), children: _jsx(NCOLogo, {}) }) }) }));
};
//# sourceMappingURL=Wallet.js.map