import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Col, Row } from "antd";
import { Creators } from "../Components/Creators";
import { useCachedPool, useCachedPowerups } from "../hooks/useCached";
import BadgeWidget from "./BadgeWidget";
const SectionWrapper = ({ title, children, seeAllUrl, }) => {
    return (_jsxs(Row, { className: "nl-user-detail-section", children: [_jsxs(Row, { className: "nl-user-detail-subSection", children: [_jsx(Col, { className: "nl-user-detail-section-title", children: _jsx("p", { className: "paragraph-1b", children: title }) }), _jsx(Col, { className: "nl-user-detail-see-all-btn", children: _jsx("a", { href: seeAllUrl, target: "_blank", rel: "noreferrer", children: _jsx(Button, { className: "secondary-button", children: _jsx("span", { className: "paragraph-2b", children: "See all" }) }) }) })] }), _jsx(Row, { className: "u-margin-top-medium", children: children })] }));
};
const UserDetail = ({ user, badges }) => {
    const poolInfo = useCachedPool({ owner: user?.username });
    const powerups = useCachedPowerups(user, true);
    if (!user)
        return _jsx(_Fragment, {});
    let poweredNumber = user.powered || 0;
    let poweringNumber = user.powering || 0;
    if (poweredNumber >= 1000) {
        poweredNumber = (poweredNumber / 1000).toFixed(2) + "K";
    }
    if (poweringNumber >= 1000) {
        poweringNumber = (poweringNumber / 1000).toFixed(2) + "K";
    }
    return (_jsx(_Fragment, { children: _jsx("div", { className: "nl-user-detail-container", children: _jsxs(Row, { align: "middle", className: "u-margin-bottom-large", gutter: [60, 60], children: [_jsx(Row, { children: _jsx("div", { className: "header-2", children: "Your Watts represent the total of your badges, power-ups and swaps. To find out how it is calculated, visit the Newcoin documentation" }) }), _jsx(SectionWrapper, { title: `Swaps ${Math.floor(+poolInfo.total.quantity.toString().replace(/[^0-9_-\s\.,]/gim, ""))}`, seeAllUrl: `https://explorer-dev.newcoin.org/account/${user.username}` }), _jsx(SectionWrapper, { title: `Milestones ${badges?.length}`, seeAllUrl: `https://explorer-dev.newcoin.org/account/${user.username}`, children: _jsx(BadgeWidget, { user: user, badges: badges, className: "user-widget-heading-badge-section" }) }), _jsx(SectionWrapper, { title: `Powered by ${poweredNumber}`, seeAllUrl: `https://explorer-dev.newcoin.org/account/${user.username}`, children: _jsx(Creators, { users: powerups?.in?.value?.sort((a, b) => (b.powered || 0) - (a.powered || 0)) || [], title: "", thumbnailOnly: true, maxItems: 14 }) }), _jsx(SectionWrapper, { title: `Powering ${poweringNumber}`, seeAllUrl: `https://explorer-dev.newcoin.org/account/${user.username}`, children: _jsx(Creators, { users: powerups?.out?.value?.sort((a, b) => (b.powered || 0) - (a.powered || 0)) || [], title: "", thumbnailOnly: true, maxItems: 14 }) })] }) }) }));
};
export default UserDetail;
//# sourceMappingURL=UserDetail.js.map