import { jsxs as c, jsx as o } from "@emotion/react/jsx-runtime";
import { TEST_PROP_ID as b } from "../../../../test/constants_no_mock.js";
import { getNameDataTestId as A } from "../../../../test/getNameDataTestId.js";
import { ACCORDION_KEY as S } from "./constants.js";
import { getComponentSlotRoot as T } from "../../../../utils/getComponentSlotRoot.js";
import { AccordionRootStyled as v, AccordionSummaryStyled as N, IconLabelStyled as R, LabelGroupStyled as O, LabelStyled as w, DescriptionStyled as L, IconExpandedStyled as P, AccordionDetailsStyled as _ } from "./slots/AccordionSlots.js";
import { forwardRef as k, useState as j, useEffect as W } from "react";
import { useComponentSize as B } from "../../../../hooks/useComponentSize/index.js";
import G from "clsx";
import { ArrowChevronMdDownOutlined as K } from "@m4l/icons";
function M(a) {
  return a.replace(/\\r\\n/g, `
`).replace(/\\n/g, `
`).replace(/\\t/g, "	").replace(/\r\n/g, `
`).replace(/\r/g, `
`);
}
const $ = k((a, x) => {
  const {
    label: h,
    description: i,
    children: l,
    accordionProps: d,
    summaryProps: g,
    icon: s,
    className: y,
    dataTestId: z = "",
    skeletonLabelWidth: C = "100px",
    size: p,
    expanded: n,
    variant: D = "outlined"
  } = a, { currentSize: t } = B(p), E = T(S), [m, u] = j(n ?? d?.defaultExpanded ?? !0), f = typeof l == "string" ? M(l) : null, I = () => {
    u((r) => !r);
  };
  W(() => {
    let r = !0;
    return r && n !== void 0 && u(n), () => {
      r = !1;
    };
  }, [n]);
  const e = {
    size: t,
    variant: D,
    expanded: m,
    hasTextContent: f !== null,
    hasDescription: !!i
  };
  return /* @__PURE__ */ c(
    v,
    {
      ownerState: e,
      ref: x,
      role: "contentinfo",
      className: G(E, y),
      expanded: m,
      ...d,
      ...process.env.NODE_ENV !== "production" ? { [b]: A(S, "root", z) } : {},
      children: [
        /* @__PURE__ */ c(
          N,
          {
            ownerState: e,
            role: "heading",
            "aria-controls": "expanded-content",
            onClick: I,
            expandIcon: /* @__PURE__ */ o(
              P,
              {
                ownerState: e,
                size: t,
                "aria-label": "settings",
                src: /* @__PURE__ */ o(K, {})
              }
            ),
            ...g,
            children: [
              s && /* @__PURE__ */ o(R, { ownerState: e, src: s, size: p }),
              /* @__PURE__ */ c(O, { ownerState: e, children: [
                /* @__PURE__ */ o(
                  w,
                  {
                    ownerState: e,
                    size: t,
                    variant: "captionDens",
                    skeletonWidth: C,
                    children: h
                  }
                ),
                i ? /* @__PURE__ */ o(
                  L,
                  {
                    ownerState: e,
                    size: t,
                    color: "text.secondary",
                    variant: "caption",
                    children: i
                  }
                ) : null
              ] })
            ]
          }
        ),
        /* @__PURE__ */ o(_, { ownerState: e, children: f ?? l })
      ]
    }
  );
});
export {
  $ as Accordion
};
