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 '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';

var borderSize = "4px";
var dotSize = "4px";
var commonStyles = {
    borderRadius: borderRadius.sm,
    padding: "6px 12px",
    cursor: "pointer",
    border: borderSize + " solid " + colors.gray.white,
    boxShadow: boxShadow.md,
    backgroundColor: colors.gray.white
};
var Dot = styled("div")(function (_a) {
    var theme = _a.theme;
    return ({
        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% + " + dotSize + ")"
        },
        "&:after": {
            right: "calc(100% + " + dotSize + ")"
        }
    });
});
var EllipseBox = styled("div")(function (_a) {
    var _b;
    var theme = _a.theme;
    return (_b = {
            position: "absolute",
            top: 0,
            right: borderSize,
            width: "44px",
            height: "100%",
            borderRadius: theme.borders.radius.xs1,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            transition: theme.transitions.create(["background-color"])
        },
        _b[theme.breakpoints.down("sm")] = {
            position: "relative",
            right: "auto",
            top: "auto",
            minHeight: "28px"
        },
        _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("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")] = {
        width: "40px",
        padding: "0px"
    }, _b)));
});
var NetworkBox = styled("div")(function (_a) {
    var theme = _a.theme;
    return ({
        display: "flex",
        alignItems: "center",
        padding: "7px 16px",
        borderRadius: theme.borders.radius.sm,
        backgroundColor: theme.palette.blue.main,
        boxShadow: theme.boxShadow.md,
        marginRight: theme.spacing(1.5)
    });
});
var CapsuleBox = styled("div")({
    display: "flex"
});
var UnconnectedCapsule = styled("button")(function (_a) {
    var theme = _a.theme;
    return (__assign(__assign({}, commonStyles), { transition: theme.transitions.create(["background-color"]), "&:hover, &:focus": {
            backgroundColor: theme.palette.gray[100]
        } }));
});
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 to a 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 address.substring(0, truncateEsnAddressAfter) + "..." + 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, { 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 };
