import { a as __rest, _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as clsx } from '../clsx.m-6243b874.js';
import { styled } from '@mui/material/styles';
import MuiButton from '@mui/material/Button';
import colors from '../theme/colors.js';

/**
 * Types
 */
var ButtonColorVariants = [
    "primary",
    "primaryAlt",
    "secondary",
    "inverse",
    "info",
    "positive",
    "negative",
    "disabled"
];
/**
 * Constants
 */
var colorMap = {
    background: {
        primary: colors.primary.main,
        primaryAlt: colors.blue.main,
        secondary: colors.secondary.main,
        inverse: colors.gray.white,
        info: colors.gray[100],
        positive: colors.positive.main,
        negative: colors.negative.main,
        disabled: colors.gray[100]
    },
    color: {
        primary: colors.text.primary,
        primaryAlt: colors.text.inversePrimary,
        secondary: colors.text.inversePrimary,
        inverse: colors.text.primary,
        info: colors.text.primary,
        positive: colors.text.inversePrimary,
        negative: colors.text.inversePrimary,
        disabled: colors.text.inverseSecondary
    },
    text: {
        primary: colors.text.primary,
        primaryAlt: colors.primary.main,
        secondary: colors.gray[500],
        inverse: colors.gray.white,
        info: colors.gray[500],
        positive: colors.positive.main,
        negative: colors.negative.main,
        disabled: colors.gray[300]
    }
};
// TODO: refactor mobile styles
var getTypographyValue = function (_a) {
    var size = _a.size, theme = _a.theme;
    switch (size) {
        case "xs":
            return {
                main: theme.typography.button4,
                mobile: theme.typography.button4Mobile
            };
        case "sm":
            return {
                main: theme.typography.button3,
                mobile: theme.typography.button3Mobile
            };
        case "md":
            return {
                main: theme.typography.button2,
                mobile: theme.typography.button2Mobile
            };
        case "lg":
            return {
                main: theme.typography.button1,
                mobile: theme.typography.button1Mobile
            };
    }
};
var getPadding = function (_a) {
    var size = _a.size, theme = _a.theme, onlyIcon = _a.onlyIcon;
    switch (size) {
        case "xs":
            return {
                main: theme.spacing(1, onlyIcon ? 1 : 2.5),
                mobile: theme.spacing(0.65, onlyIcon ? 0.65 : 1.75)
            };
        case "sm":
            return {
                main: theme.spacing(1.5, onlyIcon ? 1.5 : 3),
                mobile: theme.spacing(1, onlyIcon ? 1 : 1.75)
            };
        case "md":
            return {
                main: theme.spacing(onlyIcon ? 2 : 1.75, onlyIcon ? 2 : 4),
                mobile: theme.spacing(onlyIcon ? 1 : 1.5, onlyIcon ? 1 : 3)
            };
        case "lg":
            return {
                main: theme.spacing(3, onlyIcon ? 3 : 6),
                mobile: theme.spacing(onlyIcon ? 1 : 1.5, onlyIcon ? 1 : 3)
            };
    }
};
var getRadius = function (_a) {
    var size = _a.size, theme = _a.theme;
    switch (size) {
        case "xs":
            return {
                main: theme.borders.radius.xs1,
                mobile: theme.borders.radius.xs1
            };
        case "sm":
            return {
                main: theme.borders.radius.sm,
                mobile: theme.borders.radius.xs1
            };
        case "md":
            return {
                main: theme.borders.radius.sm,
                mobile: theme.spacing(1.5)
            };
        case "lg":
            return {
                main: theme.borders.radius.lg,
                mobile: theme.spacing(1.5)
            };
    }
};
var PREFIX = "Button";
var classes = {
    root: "".concat(PREFIX, "-root"),
    underline: "".concat(PREFIX, "-underline")
};
var StyledButton = styled(MuiButton)(function (_a) {
    var _b, _c, _d, _e, _f, _g;
    var _h, _j, _k, _l, _m, _o;
    var theme = _a.theme, props = __rest(_a, ["theme"]);
    var size = props.size, align = props.$align, $color = props.$color, onlyIcon = props.$onlyIcon;
    var color = $color !== null && $color !== void 0 ? $color : "primary";
    return __assign(__assign({ padding: (_h = getPadding({ size: size, theme: theme, onlyIcon: onlyIcon })) === null || _h === void 0 ? void 0 : _h.main, borderRadius: (_j = getRadius({ size: size, theme: theme })) === null || _j === void 0 ? void 0 : _j.main, textAlign: align, justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center", transition: theme.transitions.create(["box-shadow", "transform", "background", "color", "border"]), position: "relative", textTransform: "none" }, (_k = getTypographyValue({ size: size, theme: theme })) === null || _k === void 0 ? void 0 : _k.main), (_b = {}, _b[theme.breakpoints.down("sm")] = __assign(__assign({}, (_l = getTypographyValue({ size: size, theme: theme })) === null || _l === void 0 ? void 0 : _l.mobile), { padding: (_m = getPadding({ size: size, theme: theme, onlyIcon: onlyIcon })) === null || _m === void 0 ? void 0 : _m.mobile, borderRadius: (_o = getRadius({ size: size, theme: theme })) === null || _o === void 0 ? void 0 : _o.mobile, fontWeight: theme.typography.fontWeightBold }), _b["&:active, &:hover, &:focus"] = {
        outline: "none"
    }, _b["&.MuiButton-contained"] = (_c = {
            color: colorMap.color[color],
            backgroundColor: colorMap.background[color],
            boxShadow: size === "lg" ? theme.boxShadow.lg : theme.boxShadow.md
        },
        _c[theme.breakpoints.down("sm")] = {
            boxShadow: theme.boxShadow.md
        },
        _c["&:hover"] = {
            boxShadow: theme.boxShadow.md,
            transform: size === "lg" || size === "md" ? "scale(1.05)" : "scale(1.015)"
        },
        _c["&:active"] = {
            boxShadow: size === "lg" ? theme.boxShadow.lg : theme.boxShadow.md,
            transform: size === "lg" || size === "md" ? "scale(1.03)" : "scale(1.01)"
        },
        _c["&.Mui-disabled"] = {
            color: colorMap.color.disabled,
            backgroundColor: colorMap.background.disabled,
            boxShadow: "none"
        },
        _c), _b["&.MuiButton-outlined"] = (_d = {
            border: 0,
            color: theme.palette.text.primary,
            backgroundColor: "transparent",
            boxShadow: "inset 0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.gray[300]),
            "&:hover, &:active": {
                backgroundColor: theme.palette.gray[100]
            }
        },
        _d["&.".concat(PREFIX, "-secondary")] = {
            color: theme.palette.text.secondary
        },
        _d["&.Mui-disabled"] = {
            color: theme.palette.text.inverseSecondary,
            boxShadow: "inset 0 0 0 ".concat(theme.borders.size.primary, "px ").concat(theme.palette.text.inverseSecondary)
        },
        _d[theme.breakpoints.down("sm")] = {
            boxShadow: "inset 0 0 0 ".concat(theme.borders.size.secondary, "px ").concat(theme.palette.text.inverseSecondary)
        },
        _d), _b["&.MuiButton-text"] = {
        color: colorMap.text[color],
        backgroundColor: "transparent !important",
        boxShadow: "none !important",
        fontWeight: theme.typography.fontWeightMedium,
        "&.Mui-disabled": {
            color: colorMap.text.disabled
        }
    }, _b["&.Mui-disabled"] = {
        transform: "none !important"
    }, _b["&.MuiButton-fullWidth"] = {
        "& .MuiButton-endIcon": {
            position: onlyIcon ? "static" : "absolute",
            right: theme.spacing(3),
            top: "50%",
            transform: onlyIcon ? "none" : "translate(0, -50%)"
        }
    }, _b["& .MuiButton-startIcon"] = (_e = {
            marginTop: theme.spacing(-1),
            marginBottom: theme.spacing(-1),
            marginLeft: onlyIcon ? 0 : theme.spacing(-1),
            marginRight: onlyIcon ? 0 : size === "sm" ? theme.spacing(1) : theme.spacing(1.5)
        },
        _e[theme.breakpoints.down("sm")] = {
            marginTop: 0,
            marginBottom: 0
        },
        _e), _b["& .MuiButton-endIcon"] = (_f = {
            marginTop: theme.spacing(-1),
            marginBottom: theme.spacing(-1),
            marginLeft: onlyIcon ? 0 : size === "sm" ? theme.spacing(1) : theme.spacing(1.5),
            marginRight: onlyIcon ? 0 : theme.spacing(-1)
        },
        _f[theme.breakpoints.down("sm")] = {
            marginTop: 0,
            marginBottom: 0
        },
        _f), _b["& .icon svg path"] = {
        fill: "currentColor !important"
    }, _b["&.".concat(classes.underline)] = (_g = {
            padding: "0 !important",
            color: "".concat(theme.palette.text.primary, " !important"),
            fontWeight: theme.typography.fontWeightMedium,
            "&:after": {
                content: "''",
                position: "absolute",
                left: 0,
                right: 0,
                bottom: -1,
                width: "100%",
                margin: "auto",
                borderBottom: "".concat(theme.borders.size.primary, "px solid ").concat(theme.palette.primary.main),
                transition: theme.transitions.create(["width"])
            },
            "&:active, &:hover, &:focus": {
                "&:after": {
                    width: 0
                }
            },
            "&.Mui-disabled": {
                color: "".concat(colorMap.text.disabled, " !important"),
                "&:after": {
                    borderColor: colorMap.text.disabled
                }
            }
        },
        _g[theme.breakpoints.down("sm")] = {
            "&:after": {
                borderBottomWidth: theme.borders.size.secondary
            }
        },
        _g), _b["&.".concat(PREFIX, "-info")] = {
        boxShadow: "none !important"
    }, _b));
});
var Button = forwardRef(function (_a, ref) {
    var _b;
    var value = _a.value, _c = _a.align, align = _c === void 0 ? "center" : _c; _a.placeholder; var _d = _a.color, color = _d === void 0 ? "primary" : _d, _e = _a.variant, variant = _e === void 0 ? "contained" : _e, _f = _a.size, size = _f === void 0 ? "sm" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, href = _a.href, linkProps = _a.linkProps, props = __rest(_a, ["value", "align", "placeholder", "color", "variant", "size", "disabled", "startIcon", "endIcon", "onClick", "href", "linkProps"]);
    var onlyIcon = Boolean(!props.children) && ((_b = Boolean(startIcon)) !== null && _b !== void 0 ? _b : Boolean(endIcon));
    var className = clsx([classes.root, variant === "underline" && classes.underline, "".concat(PREFIX, "-").concat(color)]);
    return (jsx(StyledButton, __assign({ ref: ref, value: value, className: className, variant: variant !== "underline" ? variant : undefined, disabled: disabled, onClick: onClick, startIcon: startIcon, endIcon: endIcon, "$align": align, size: size, "$color": color, "$onlyIcon": onlyIcon }, (href && __assign({ href: href }, linkProps)), props), void 0));
});

export { ButtonColorVariants, Button as default };
