import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { styled } from '@mui/material/styles';
import Typography from './Typography.js';
import colors from '../theme/colors.js';
import boxShadow from '../theme/boxShadow.js';
import { borderRadius } from '../theme/borders.js';
import { typographyTheme } from '../theme/typography.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';

var borderSize = "4px";
var dotSize = "4px";
var borderMobileSize = "2px";
var commonStyles = {
    borderRadius: borderRadius.sm,
    cursor: "pointer",
    border: "".concat(borderSize, " solid ").concat(colors.gray.white),
    boxShadow: boxShadow.md,
    backgroundColor: colors.gray.white,
    padding: "8px 12px",
    ".MuiTypography-root": __assign({}, typographyTheme.button4)
};
var commonMobileStyles = {
    borderRadius: borderRadius.xs1,
    borderWidth: borderMobileSize,
    boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.04)",
    ".MuiTypography-root": __assign(__assign({}, typographyTheme.button4Mobile), { lineHeight: "16px" })
};
var Dot = styled("div")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            position: "relative",
            width: dotSize,
            height: dotSize,
            borderRadius: theme.borders.radius.rounded,
            backgroundColor: theme.palette.gray[900],
            "&:before, &:after": {
                content: "''",
                position: "absolute",
                top: 0,
                width: "100%",
                height: "100%",
                borderRadius: theme.borders.radius.rounded,
                backgroundColor: theme.palette.gray[900]
            },
            "&:before": {
                left: "calc(100% + ".concat(dotSize, ")")
            },
            "&:after": {
                right: "calc(100% + ".concat(dotSize, ")")
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            width: "2px",
            height: "2px",
            "&:before": {
                left: "calc(100% + 2px)"
            },
            "&:after": {
                right: "calc(100% + 2px)"
            }
        },
        _b);
});
var EllipseBox = styled("div")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            position: "absolute",
            top: 0,
            right: 0,
            width: theme.spacing(5.5),
            height: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: theme.borders.radius.xs1,
            transition: theme.transitions.create(["background-color"])
        },
        _b[theme.breakpoints.down("sm")] = {
            position: "relative",
            right: "auto",
            top: "auto",
            minHeight: "24px",
            borderRadius: theme.borders.radius.xs2
        },
        _b);
});
var ItemBox = styled("div")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            "&:first-of-type": {
                marginRight: theme.spacing(1.5)
            }
        },
        _b[theme.breakpoints.down("lg")] = {
            "&.WalletCapsule-balance": {
                display: "none"
            }
        },
        _b[theme.breakpoints.down("sm")] = {
            display: "none"
        },
        _b);
});
var CapsuleButton = styled("button")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (__assign(__assign({}, commonStyles), (_b = { position: "relative", display: "flex", alignItems: "center", paddingRight: "calc(12px + 44px)", "&:hover, &:focus": {
                ".ellipse-box": {
                    backgroundColor: theme.palette.gray[100]
                }
            } }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { width: "28px", padding: 0 }), _b)));
});
var NetworkBox = styled("div")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (__assign(__assign({}, commonStyles), (_b = { display: "flex", alignItems: "center", padding: "7px 16px", marginRight: theme.spacing(1.25), borderWidth: 0, backgroundColor: theme.palette.blue.main }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { borderWidth: 0, padding: theme.spacing(0.75, 1), marginRight: theme.spacing(0.5) }), _b)));
});
var CapsuleBox = styled("div")(function (_a) {
    var theme = _a.theme;
    return ({
        display: "flex",
        fontFamily: theme.typography.fontFamilyHeadline
    });
});
var UnconnectedCapsule = styled("button")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (__assign(__assign({}, commonStyles), (_b = { display: "block", transition: theme.transitions.create(["background-color"]), "&:hover, &:focus": {
                backgroundColor: theme.palette.gray[100]
            } }, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, commonMobileStyles), { padding: "4px 10px" }), _b)));
});
var defaultNetworkRenderer = function (network) {
    switch (network.name) {
        case "bnb":
            return "BNB";
        case "goerli":
            return "Görli";
        case "homestead":
            return "Ethereum";
        default: {
            var chunks = network.name.split("");
            chunks[0] = chunks[0].toUpperCase();
            return chunks.join("");
        }
    }
};
var WalletCapsule = function (_a) {
    var _b = _a.renderNetwork, renderNetwork = _b === void 0 ? defaultNetworkRenderer : _b, _c = _a.truncateEsnAddressAfter, truncateEsnAddressAfter = _c === void 0 ? 6 : _c, _d = _a.connectCopy, connectCopy = _d === void 0 ? "Connect Wallet" : _d, _e = _a.unit, unit = _e === void 0 ? "ETH" : _e, _f = _a.connected, connected = _f === void 0 ? false : _f, _g = _a.balance, balance = _g === void 0 ? 0 : _g, _h = _a.address, address = _h === void 0 ? "" : _h, network = _a.network, onClick = _a.onClick;
    var truncateEsnAddress = useCallback(function (address) {
        return "0x".concat(address.replace("0x", "").substring(0, truncateEsnAddressAfter), "...").concat(address.substring(address.length - truncateEsnAddressAfter));
    }, [truncateEsnAddressAfter]);
    if (connected) {
        return (jsxs(CapsuleBox, { children: [network && (jsx(NetworkBox, { children: jsx(Typography, __assign({ variant: "button4", color: "inversePrimary" }, { children: renderNetwork(network) }), void 0) }, void 0)), jsxs(CapsuleButton, __assign({ onClick: onClick }, { children: [jsx(ItemBox, __assign({ className: "WalletCapsule-balance" }, { children: jsxs(Typography, __assign({ variant: "button4" }, { children: [balance, " ", unit] }), void 0) }), void 0), jsx(ItemBox, { children: jsx(Typography, __assign({ variant: "button4", color: "secondary" }, { children: truncateEsnAddress(address) }), void 0) }, void 0), jsx(EllipseBox, __assign({ className: "ellipse-box" }, { children: jsx(Dot, {}, void 0) }), void 0)] }), void 0)] }, void 0));
    }
    return (jsx(UnconnectedCapsule, __assign({ onClick: onClick }, { children: jsx(Typography, __assign({ variant: "button4" }, { children: connectCopy }), void 0) }), void 0));
};

export { WalletCapsule as default };
