import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import "./styles.scss";
import Icon from "../Icon";
import { iconSizeToPx } from "../Icon/IconSizes";
export const ButtonModes = ["filled", "tonal", "outlined", "ghost"];
export const ButtonSizes = ["large", "medium", "small", "x-small"];
export const ButtonColors = ["accent", "danger", "white"];
export const ButtonIconPositions = ["left", "right"];
export default function Button({ text, className = "", disabled = false, active = false, color = "accent", size = "large", mode = "filled", icon, iconImage, iconPosition = "right", iconSize, iconFilled = false, spin = false, onClick = () => { }, ...buttonProps }) {
    const hasIconSlot = Boolean(spin || iconImage || icon);
    const getClassNames = cx("ds-button", className, size, mode, color, {
        active: !disabled && active,
        "icon-left": hasIconSlot && iconPosition === "left",
        "icon-right": hasIconSlot && iconPosition === "right",
    });
    const getIconSize = () => {
        if (iconSize)
            return iconSize;
        if (size === "large")
            return "small";
        if (size === "medium" || size === "small")
            return "x-small";
        return "x-small";
    };
    const resolvedIconSize = getIconSize();
    const iconBoxPx = iconSizeToPx(resolvedIconSize);
    const renderIconVisual = () => {
        if (spin) {
            return (_jsx(Icon, { name: "progress_activity", size: resolvedIconSize, filled: iconFilled, className: "spin" }));
        }
        if (iconImage) {
            return (_jsx("img", { src: iconImage, alt: "", className: "ds-button-icon-image", width: iconBoxPx, height: iconBoxPx }));
        }
        if (icon) {
            return (_jsx(Icon, { name: icon, size: resolvedIconSize, filled: iconFilled }));
        }
        return null;
    };
    const iconVisual = renderIconVisual();
    return (_jsxs("button", { type: "button", disabled: disabled, className: getClassNames, onClick: onClick, ...buttonProps, children: [hasIconSlot && iconPosition === "left" && iconVisual, _jsx("span", { className: "ds-button-text", children: text }), hasIconSlot && iconPosition === "right" && iconVisual] }));
}
