import g from "./index-extends.js";
import * as c from "react";
import { clsx as G } from "./index-clsx.m.js";
import { ClockPointer as J } from "./index-ClockPointer.js";
import { useUtils as Q } from "./index-useUtils.js";
import { WrapperVariantContext as Z } from "./index-WrapperVariantContext.js";
import { getMinutes as $, getHours as ee } from "./index-shared2.js";
import { getClockUtilityClass as oe } from "./index-clockClasses.js";
import { jsxs as h, jsx as s } from "react/jsx-runtime";
import te from "./index-useThemeProps.js";
import re from "./index-useEnhancedEffect2.js";
import D from "./index-Typography.js";
import ne from "./index-composeClasses.js";
import i from "./index-styled.js";
import E from "./index-IconButton2.js";
const se = (e) => {
  const {
    classes: o
  } = e;
  return ne({
    root: ["root"],
    clock: ["clock"],
    wrapper: ["wrapper"],
    squareMask: ["squareMask"],
    pin: ["pin"],
    amButton: ["amButton"],
    pmButton: ["pmButton"]
  }, oe, o);
}, ae = i("div", {
  name: "MuiClock",
  slot: "Root",
  overridesResolver: (e, o) => o.root
})(({
  theme: e
}) => ({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  margin: e.spacing(2)
})), ie = i("div", {
  name: "MuiClock",
  slot: "Clock",
  overridesResolver: (e, o) => o.clock
})({
  backgroundColor: "rgba(0,0,0,.07)",
  borderRadius: "50%",
  height: 220,
  width: 220,
  flexShrink: 0,
  position: "relative",
  pointerEvents: "none"
}), le = i("div", {
  name: "MuiClock",
  slot: "Wrapper",
  overridesResolver: (e, o) => o.wrapper
})({
  "&:focus": {
    outline: "none"
  }
}), ce = i("div", {
  name: "MuiClock",
  slot: "SquareMask",
  overridesResolver: (e, o) => o.squareMask
})(({
  ownerState: e
}) => g({
  width: "100%",
  height: "100%",
  position: "absolute",
  pointerEvents: "auto",
  outline: 0,
  // Disable scroll capabilities.
  touchAction: "none",
  userSelect: "none"
}, e.disabled ? {} : {
  "@media (pointer: fine)": {
    cursor: "pointer",
    borderRadius: "50%"
  },
  "&:active": {
    cursor: "move"
  }
})), ue = i("div", {
  name: "MuiClock",
  slot: "Pin",
  overridesResolver: (e, o) => o.pin
})(({
  theme: e
}) => ({
  width: 6,
  height: 6,
  borderRadius: "50%",
  backgroundColor: e.palette.primary.main,
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)"
})), me = i(E, {
  name: "MuiClock",
  slot: "AmButton",
  overridesResolver: (e, o) => o.amButton
})(({
  theme: e,
  ownerState: o
}) => g({
  zIndex: 1,
  position: "absolute",
  bottom: o.ampmInClock ? 64 : 8,
  left: 8
}, o.meridiemMode === "am" && {
  backgroundColor: e.palette.primary.main,
  color: e.palette.primary.contrastText,
  "&:hover": {
    backgroundColor: e.palette.primary.light
  }
})), pe = i(E, {
  name: "MuiClock",
  slot: "PmButton",
  overridesResolver: (e, o) => o.pmButton
})(({
  theme: e,
  ownerState: o
}) => g({
  zIndex: 1,
  position: "absolute",
  bottom: o.ampmInClock ? 64 : 8,
  right: 8
}, o.meridiemMode === "pm" && {
  backgroundColor: e.palette.primary.main,
  color: e.palette.primary.contrastText,
  "&:hover": {
    backgroundColor: e.palette.primary.light
  }
}));
function Te(e) {
  const o = te({
    props: e,
    name: "MuiClock"
  }), {
    ampm: m,
    ampmInClock: N,
    autoFocus: M,
    children: P,
    date: y,
    getClockLabelText: _,
    handleMeridiemChange: w,
    isTimeDisabled: x,
    meridiemMode: R,
    minutesStep: B = 1,
    onChange: q,
    selectedId: A,
    type: r,
    value: n,
    disabled: p,
    readOnly: k,
    className: U
  } = o, C = o, j = Q(), F = c.useContext(Z), l = c.useRef(!1), a = se(C), V = x(n, r), W = !m && r === "hours" && (n < 1 || n > 12), u = (t, v) => {
    p || k || x(t, r) || q(t, v);
  }, d = (t, v) => {
    let {
      offsetX: f,
      offsetY: b
    } = t;
    if (f === void 0) {
      const I = t.target.getBoundingClientRect();
      f = t.changedTouches[0].clientX - I.left, b = t.changedTouches[0].clientY - I.top;
    }
    const O = r === "seconds" || r === "minutes" ? $(f, b, B) : ee(f, b, !!m);
    u(O, v);
  }, z = (t) => {
    l.current = !0, d(t, "shallow");
  }, H = (t) => {
    l.current && (d(t, "finish"), l.current = !1);
  }, K = (t) => {
    t.buttons > 0 && d(t.nativeEvent, "shallow");
  }, X = (t) => {
    l.current && (l.current = !1), d(t.nativeEvent, "finish");
  }, Y = c.useMemo(() => r === "hours" ? !0 : n % 5 === 0, [r, n]), T = r === "minutes" ? B : 1, S = c.useRef(null);
  re(() => {
    M && S.current.focus();
  }, [M]);
  const L = (t) => {
    if (!l.current)
      switch (t.key) {
        case "Home":
          u(0, "partial"), t.preventDefault();
          break;
        case "End":
          u(r === "minutes" ? 59 : 23, "partial"), t.preventDefault();
          break;
        case "ArrowUp":
          u(n + T, "partial"), t.preventDefault();
          break;
        case "ArrowDown":
          u(n - T, "partial"), t.preventDefault();
          break;
      }
  };
  return /* @__PURE__ */ h(ae, {
    className: G(U, a.root),
    children: [/* @__PURE__ */ h(ie, {
      className: a.clock,
      children: [/* @__PURE__ */ s(ce, {
        onTouchMove: z,
        onTouchEnd: H,
        onMouseUp: X,
        onMouseMove: K,
        ownerState: {
          disabled: p
        },
        className: a.squareMask
      }), !V && /* @__PURE__ */ h(c.Fragment, {
        children: [/* @__PURE__ */ s(ue, {
          className: a.pin
        }), y && /* @__PURE__ */ s(J, {
          type: r,
          value: n,
          isInner: W,
          hasSelected: Y
        })]
      }), /* @__PURE__ */ s(le, {
        "aria-activedescendant": A,
        "aria-label": _(r, y, j),
        ref: S,
        role: "listbox",
        onKeyDown: L,
        tabIndex: 0,
        className: a.wrapper,
        children: P
      })]
    }), m && (F === "desktop" || N) && /* @__PURE__ */ h(c.Fragment, {
      children: [/* @__PURE__ */ s(me, {
        onClick: k ? void 0 : () => w("am"),
        disabled: p || R === null,
        ownerState: C,
        className: a.amButton,
        children: /* @__PURE__ */ s(D, {
          variant: "caption",
          children: "AM"
        })
      }), /* @__PURE__ */ s(pe, {
        disabled: p || R === null,
        onClick: k ? void 0 : () => w("pm"),
        ownerState: C,
        className: a.pmButton,
        children: /* @__PURE__ */ s(D, {
          variant: "caption",
          children: "PM"
        })
      })]
    })]
  });
}
export {
  Te as Clock
};
