import { jsx as o } from "@emotion/react/jsx-runtime";
import M from "clsx";
import { useMemo as h, useCallback as n } from "react";
import { useModuleSkeleton as N } from "@m4l/core";
import { useIsMobile as R } from "@m4l/graphics";
import { getPropDataTestId as l } from "../../../../test/getNameDataTestId.js";
import { useComponentSize as g } from "../../../../hooks/useComponentSize/index.js";
import { getComponentClasses as _ } from "../../../../utils/getComponentSlotRoot.js";
import { IconButtonStyled as c, PopperStyled as H, PickersCalendarHeaderStyled as j, PickersDayStyled as F, PaperStyled as K, SkeletonStyled as L, MobileDateTimePickerRootStyled as V, DesktopDateTimePickerRootStyled as Y } from "./slots/DateTimePickerSlots.js";
import { DateTimePickerEnum as i } from "./slots/DateTimePickerEnum.js";
import { DATE_TIME_PICKER_KEY_COMPONENT as a } from "./constants.js";
import { DateTimeCreatedOutlined as q, ArrowChevronSmRightOutlined as G, ArrowChevronSmLeftOutlined as J, ArrowChevronSmDownOutlined as Q } from "@m4l/icons";
const me = (O) => {
  const {
    size: v = "medium",
    error: p = !1,
    disabled: r = !1,
    className: u,
    dataTestId: m,
    variant: S,
    ampm: k = !0,
    value: f,
    onChange: P,
    ...C
  } = O, x = R(), { currentSize: d } = g(v), s = d === "small" || d === "medium" ? d : "medium", e = h(() => ({
    size: s,
    error: p,
    variant: S,
    disabled: r
  }), [s, r, p, S]), D = h(() => ({
    ...e,
    isInputAdornment: !0
  }), [e]), B = n((t) => /* @__PURE__ */ o(
    c,
    {
      ...t,
      ownerState: D,
      src: /* @__PURE__ */ o(q, {}),
      size: s,
      disabled: r
    }
  ), [s, r, D]), E = n((t) => /* @__PURE__ */ o(H, { ...t, ownerState: e, ...l(a, i.popper, m) }), [e]), y = n((t) => /* @__PURE__ */ o(j, { ...t, ownerState: e, ...l(a, i.pickersCalendarHeader, m) }), [e]), T = n((t) => /* @__PURE__ */ o(
    c,
    {
      ...t,
      ownerState: e,
      size: s,
      disabled: r,
      icon: /* @__PURE__ */ o(G, {})
    }
  ), [s, r, e]), b = n((t) => /* @__PURE__ */ o(
    c,
    {
      ...t,
      ownerState: e,
      size: s,
      disabled: r,
      icon: /* @__PURE__ */ o(J, {})
    }
  ), [s, r, e]), w = n((t) => /* @__PURE__ */ o(
    c,
    {
      ...t,
      ownerState: e,
      size: s,
      disabled: r,
      icon: /* @__PURE__ */ o(Q, {})
    }
  ), [s, r, e]), z = n((t) => /* @__PURE__ */ o(F, { ...t, disableRipple: !0, ownerState: e, ...l(a, i.pickersDay, m) }), [e]), A = n((t) => /* @__PURE__ */ o(K, { ...t, ownerState: e, ...l(a, i.paper, m) }), [e]), I = _(a, i);
  return N() ? /* @__PURE__ */ o(L, { ownerState: e, ...l(a, i.skeleton, m) }) : x ? /* @__PURE__ */ o(
    V,
    {
      ownerState: e,
      ampm: k,
      disabled: r,
      value: f,
      onChange: P,
      slots: {
        calendarHeader: y,
        nextIconButton: T,
        previousIconButton: b,
        switchViewButton: w,
        day: z,
        mobilePaper: A
      },
      slotProps: {
        textField: {
          className: M(u, I.rootMobile),
          "data-testid": l(a, i.rootMobile, m)["data-testid"]
        }
      },
      ...C
    }
  ) : /* @__PURE__ */ o(
    Y,
    {
      ownerState: e,
      ampm: k,
      disabled: r,
      value: f,
      onChange: P,
      slots: {
        openPickerButton: B,
        popper: E,
        calendarHeader: y,
        nextIconButton: T,
        previousIconButton: b,
        switchViewButton: w,
        day: z
      },
      slotProps: {
        textField: {
          className: M(u, I.rootDesktop),
          "data-testid": l(a, i.rootDesktop, m)["data-testid"]
        }
      },
      ...C
    }
  );
};
export {
  me as DateTimePicker
};
