import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { UserStake } from "./UserWidget";
import { round } from "lodash";
import { useActions } from "../overmind";
import { useCurrentUserStakeEligibility } from "../hooks/useBlockchainInfo";
import React from "react";
const DefaultPrivateContentView = ({ stakeInfo, onClick }) => (_jsxs("div", { ...(onClick ? { onClick } : {}), style: {
        position: "absolute",
        left: 0,
        top: 1,
        width: "100%",
        height: "calc(100% - 2px)",
        padding: 15,
        borderRadius: 30,
        textAlign: "center",
        ...(onClick ? { cursor: "pointer" } : {}),
    }, children: [_jsx("div", { style: {
                backdropFilter: "blur(10px)",
                opacity: 1,
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
            } }), _jsxs("div", { onClick: (e) => onClick && e.stopPropagation(), 
            // we can stake from the list of folders directly
            className: "iosdk-premium-content-notification", style: {
                background: "rgba(0,0,0,.3)",
                padding: "20px",
                borderRadius: "8px",
                width: "90%",
                maxWidth: "min(100vw,800px)",
                marginLeft: "auto",
                marginRight: "auto",
                // height: "100%",
                top: "10%",
                left: "50%",
                transform: "translate(-50%, 0)",
                position: "absolute",
            }, children: ["Premium content: stake ", round(stakeInfo.currentUserNeeds, 2), " $", stakeInfo.currency, " to access.", _jsx("br", {}), _jsx("br", {}), _jsx(UserStake, { stakeInNewsafe: true, onDone: () => { }, user: stakeInfo.owner })] })] }));
export const PremiumContent = ({ stakeToAccess, owner, children, className, style, privateContentView, link, ...rest }) => {
    const actions = useActions();
    const stakeInfo = useCurrentUserStakeEligibility(owner, stakeToAccess);
    const blur = !stakeInfo.currentUserEligible;
    className += "iosdk-premium-content";
    style = {
        ...style,
        ...(blur
            ? {
                filter: "blur(2px)",
            }
            : {}),
    };
    const PrivateContentView = privateContentView || DefaultPrivateContentView;
    const onClick = () => link && actions.routing.historyPush({ location: link });
    if (!blur)
        return _jsx(_Fragment, { children: children });
    else
        return (_jsxs(_Fragment, { children: [React.Children.map(children, (c) => {
                    return React.cloneElement(c, { onClick });
                }), blur ? _jsx(PrivateContentView, { stakeInfo: stakeInfo, onClick: onClick }) : _jsx(_Fragment, {})] }));
};
//# sourceMappingURL=PremiumContent.js.map