import { jsx, jsxs } from "react/jsx-runtime";
import {
  Button,
  CircularProgress,
  Typography
} from "@mui/material";
export default function LoadingButton({
  ref = void 0,
  children,
  loading = false,
  loadingPosition = "start",
  loadingIndicator = void 0,
  loadingProps = {},
  loadingOnly = false,
  onClick,
  sx,
  ...props
}) {
  const handleClick = (e) => {
    if (loading) {
      return;
    }
    onClick?.(e);
  };
  const getPositionStyles = (position) => {
    return {
      color: "inherit",
      ...position === "start" && { mr: 1 },
      ...position === "end" && { ml: 1 },
      ...position === "center" && {
        position: "absolute",
        left: "50%",
        transform: "translateY(-50%) translateX(-50%)",
        top: "50%"
      },
      display: "inline-flex",
      alignItems: "center"
    };
  };
  const defaultIndicator = /* @__PURE__ */ jsx(CircularProgress, { size: 16, ...loadingProps, sx: { color: "inherit", ...loadingProps?.sx || {} } });
  const indicator = /* @__PURE__ */ jsx(Typography, { sx: getPositionStyles(loadingPosition), children: loadingIndicator || defaultIndicator });
  return /* @__PURE__ */ jsxs(
    Button,
    {
      ref,
      disabled: props.disabled || loading,
      onClick: handleClick,
      sx: {
        position: "relative",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        ...sx
      },
      ...props,
      children: [
        loading && loadingPosition === "start" && indicator,
        /* @__PURE__ */ jsx(Typography, { sx: { visibility: loading && loadingOnly ? "hidden" : "visible" }, children }),
        loading && loadingPosition === "center" && indicator,
        loading && loadingPosition === "end" && indicator
      ]
    }
  );
}
LoadingButton.displayName = "LoadingButton";
