import { a as __rest, _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx } from 'react/jsx-runtime';
import { styled } from '@mui/material/styles';
import MuiCard from '@mui/material/Card';
import colors from '../theme/colors.js';

var CardSizeVariants;
(function (CardSizeVariants) {
    CardSizeVariants["Initial"] = "initial";
    CardSizeVariants["Small"] = "small";
    CardSizeVariants["Medium"] = "medium";
    CardSizeVariants["Large"] = "large";
})(CardSizeVariants || (CardSizeVariants = {}));
var CardColorVariants;
(function (CardColorVariants) {
    CardColorVariants["Initial"] = "initial";
    CardColorVariants["Muted"] = "muted";
    CardColorVariants["Primary"] = "primary";
    CardColorVariants["Secondary"] = "secondary";
    CardColorVariants["Positive"] = "positive";
    CardColorVariants["Negative"] = "negative";
})(CardColorVariants || (CardColorVariants = {}));
var sizeMap = new Map([
    [CardSizeVariants.Initial, { y: 0, x: 0 }],
    [CardSizeVariants.Small, { y: 2, x: 2.5 }],
    [CardSizeVariants.Medium, { y: 4, x: 4 }],
    [CardSizeVariants.Large, { y: 6, x: 8 }]
]);
var colorMap = new Map([
    [CardColorVariants.Initial, colors.text.primary],
    [CardColorVariants.Muted, colors.text.primary],
    [CardColorVariants.Primary, colors.text.primary],
    [CardColorVariants.Secondary, colors.text.inversePrimary],
    [CardColorVariants.Positive, colors.text.primary],
    [CardColorVariants.Negative, colors.text.primary]
]);
var backgroundMap = new Map([
    [CardColorVariants.Initial, colors.gray.white],
    [CardColorVariants.Muted, colors.gray[100]],
    [CardColorVariants.Primary, colors.primary.main],
    [CardColorVariants.Secondary, colors.secondary.main],
    [CardColorVariants.Positive, colors.green.light],
    [CardColorVariants.Negative, colors.red.light]
]);
var StyledCard = styled(MuiCard)(function (_a) {
    var _b = _a.color, color = _b === void 0 ? CardColorVariants.Initial : _b, _c = _a.size, size = _c === void 0 ? CardSizeVariants.Medium : _c, selected = _a.selected, $bubble = _a.$bubble, theme = _a.theme;
    var padding = sizeMap.get(size);
    var bg = backgroundMap.get(color);
    return {
        padding: padding ? theme.spacing(padding.y, padding.x) : "0",
        marginBottom: theme.spacing(0.8),
        borderRadius: theme.borders.radius.sm,
        color: colorMap.get(color),
        backgroundColor: backgroundMap.get(color),
        position: "relative",
        overflow: "visible",
        boxShadow: selected ? theme.boxShadow.md + ", inset 0 0 0 3px " + theme.palette.primary.main : "none",
        zIndex: 1,
        "&:after": {
            content: "''",
            top: -1,
            left: -24,
            position: "absolute",
            border: "0px solid",
            width: "38px",
            height: "26px",
            backgroundColor: "transparent",
            borderBottomLeftRadius: "50%",
            borderBottomRightRadius: "50%",
            boxShadow: bg ? "-14px 9px 0px 3px " + bg : "none",
            transform: "rotateY(180deg)",
            zIndex: 0,
            display: $bubble ? "block" : "none"
        }
    };
});
var Card = function (_a) {
    var children = _a.children, color = _a.color, size = _a.size, selected = _a.selected, $bubble = _a.$bubble, props = __rest(_a, ["children", "color", "size", "selected", "$bubble"]);
    var styleProps = { color: color, size: size, selected: selected, $bubble: $bubble };
    return (jsx(StyledCard, __assign({}, styleProps, props, { children: children }), void 0));
};

export { CardColorVariants, CardSizeVariants, backgroundMap, colorMap, Card as default, sizeMap };
