import E from "./index-objectWithoutPropertiesLoose.js";
import g from "./index-extends.js";
import * as f from "react";
import { isFragment as _ } from "react-is";
import t from "./index-_virtual16.js";
import { clsx as D } from "./index-clsx.js";
import M from "./index-styled.js";
import o, { getToggleButtonGroupUtilityClass as w } from "./index-toggleButtonGroupClasses.js";
import F from "./index-ToggleButtonGroupContext.js";
import U from "./index-ToggleButtonGroupButtonContext.js";
import m from "./index-toggleButtonClasses.js";
import { jsx as T } from "react/jsx-runtime";
import { useDefaultProps as k } from "./index-DefaultPropsProvider.js";
import I from "./index-getValidReactChildren.js";
import N from "./index-capitalize.js";
import V from "./index-composeClasses.js";
const q = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"], A = (i) => {
  const {
    classes: e,
    orientation: l,
    fullWidth: u,
    disabled: B
  } = i, h = {
    root: ["root", l === "vertical" && "vertical", u && "fullWidth"],
    grouped: ["grouped", `grouped${N(l)}`, B && "disabled"],
    firstButton: ["firstButton"],
    lastButton: ["lastButton"],
    middleButton: ["middleButton"]
  };
  return V(h, w, e);
}, H = M("div", {
  name: "MuiToggleButtonGroup",
  slot: "Root",
  overridesResolver: (i, e) => {
    const {
      ownerState: l
    } = i;
    return [{
      [`& .${o.grouped}`]: e.grouped
    }, {
      [`& .${o.grouped}`]: e[`grouped${N(l.orientation)}`]
    }, {
      [`& .${o.firstButton}`]: e.firstButton
    }, {
      [`& .${o.lastButton}`]: e.lastButton
    }, {
      [`& .${o.middleButton}`]: e.middleButton
    }, e.root, l.orientation === "vertical" && e.vertical, l.fullWidth && e.fullWidth];
  }
})(({
  ownerState: i,
  theme: e
}) => g({
  display: "inline-flex",
  borderRadius: (e.vars || e).shape.borderRadius
}, i.orientation === "vertical" && {
  flexDirection: "column"
}, i.fullWidth && {
  width: "100%"
}, {
  [`& .${o.grouped}`]: g({}, i.orientation === "horizontal" ? {
    [`&.${o.selected} + .${o.grouped}.${o.selected}`]: {
      borderLeft: 0,
      marginLeft: 0
    }
  } : {
    [`&.${o.selected} + .${o.grouped}.${o.selected}`]: {
      borderTop: 0,
      marginTop: 0
    }
  })
}, i.orientation === "horizontal" ? {
  [`& .${o.firstButton},& .${o.middleButton}`]: {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0
  },
  [`& .${o.lastButton},& .${o.middleButton}`]: {
    marginLeft: -1,
    borderLeft: "1px solid transparent",
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0
  }
} : {
  [`& .${o.firstButton},& .${o.middleButton}`]: {
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0
  },
  [`& .${o.lastButton},& .${o.middleButton}`]: {
    marginTop: -1,
    borderTop: "1px solid transparent",
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0
  }
}, i.orientation === "horizontal" ? {
  [`& .${o.lastButton}.${m.disabled},& .${o.middleButton}.${m.disabled}`]: {
    borderLeft: "1px solid transparent"
  }
} : {
  [`& .${o.lastButton}.${m.disabled},& .${o.middleButton}.${m.disabled}`]: {
    borderTop: "1px solid transparent"
  }
})), J = /* @__PURE__ */ f.forwardRef(function(e, l) {
  const u = k({
    props: e,
    name: "MuiToggleButtonGroup"
  }), {
    children: B,
    className: h,
    color: C = "standard",
    disabled: b = !1,
    exclusive: R = !1,
    fullWidth: $ = !1,
    onChange: a,
    orientation: z = "horizontal",
    size: v = "medium",
    value: n
  } = u, W = E(u, q), x = g({}, u, {
    disabled: b,
    fullWidth: $,
    orientation: z,
    size: v
  }), d = A(x), L = f.useCallback((s, r) => {
    if (!a)
      return;
    const c = n && n.indexOf(r);
    let p;
    n && c >= 0 ? (p = n.slice(), p.splice(c, 1)) : p = n ? n.concat(r) : [r], a(s, p);
  }, [a, n]), O = f.useCallback((s, r) => {
    a && a(s, n === r ? null : r);
  }, [a, n]), y = f.useMemo(() => ({
    className: d.grouped,
    onChange: R ? O : L,
    value: n,
    size: v,
    fullWidth: $,
    color: C,
    disabled: b
  }), [d.grouped, R, O, L, n, v, $, C, b]), G = I(B), j = G.length, P = (s) => {
    const r = s === 0, c = s === j - 1;
    return r && c ? "" : r ? d.firstButton : c ? d.lastButton : d.middleButton;
  };
  return /* @__PURE__ */ T(H, g({
    role: "group",
    className: D(d.root, h),
    ref: l,
    ownerState: x
  }, W, {
    children: /* @__PURE__ */ T(F.Provider, {
      value: y,
      children: G.map((s, r) => (process.env.NODE_ENV !== "production" && _(s), /* @__PURE__ */ T(U.Provider, {
        value: P(r),
        children: s
      }, r)))
    })
  }));
});
process.env.NODE_ENV !== "production" && (J.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: t.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: t.object,
  /**
   * @ignore
   */
  className: t.string,
  /**
   * The color of the button when it is selected.
   * It supports both default and custom theme colors, which can be added as shown in the
   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
   * @default 'standard'
   */
  color: t.oneOfType([t.oneOf(["standard", "primary", "secondary", "error", "info", "success", "warning"]), t.string]),
  /**
   * If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
   * @default false
   */
  disabled: t.bool,
  /**
   * If `true`, only allow one of the child ToggleButton values to be selected.
   * @default false
   */
  exclusive: t.bool,
  /**
   * If `true`, the button group will take up the full width of its container.
   * @default false
   */
  fullWidth: t.bool,
  /**
   * Callback fired when the value changes.
   *
   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
   * @param {any} value of the selected buttons. When `exclusive` is true
   * this is a single value; when false an array of selected values. If no value
   * is selected and `exclusive` is true the value is null; when false an empty array.
   */
  onChange: t.func,
  /**
   * The component orientation (layout flow direction).
   * @default 'horizontal'
   */
  orientation: t.oneOf(["horizontal", "vertical"]),
  /**
   * The size of the component.
   * @default 'medium'
   */
  size: t.oneOfType([t.oneOf(["small", "medium", "large"]), t.string]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
  /**
   * The currently selected value within the group or an array of selected
   * values when `exclusive` is false.
   *
   * The value must have reference equality with the option in order to be selected.
   */
  value: t.any
});
export {
  J as default
};
