import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { a as k } from "../../../../sdk/dist/shared/chunk-I3VL6SRH.js";
import "@sinclair/typebox";
import "../../../../sdk/dist/shared/chunk-3YVJ2ELD.js";
import "../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { useState } from "react";
import { MdKeyboardArrowRight } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/md/index.js";
import TextContent from "../components/TextContent.js";
import { useBrickStyle } from "../hooks/use-brick-style.js";
import BrickRoot from "../components/BrickRoot.js";
function Accordion({ brick, editable }) {
  const styles = useBrickStyle(brick);
  const { props } = brick;
  const items = Array.isArray(props.items) ? props.items : [];
  const { rounding, ...otherStyles } = styles;
  const [itemOpened, setItemOpened] = useState(
    items.findIndex((item) => !!item.defaultOpen) || null
  );
  const [openedItems, setOpenedItems] = useState(() => items.map((item) => !!item.defaultOpen));
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest: k,
      className: D("flex flex-col overflow-hidden relative", Object.values(otherStyles)),
      children: [
        editable && items.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center text-center p-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-base", children: "Add content to this accordion in the panel" }) }),
        items.map((item, index) => {
          const isOpen = !props.restrictOneOpen ? openedItems[index] || item.defaultOpen : itemOpened === index;
          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("flex flex-col border", rounding, "overflow-hidden"), children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "button",
              {
                type: "button",
                "aria-expanded": isOpen,
                onClick: () => {
                  if (!props.restrictOneOpen) {
                    setOpenedItems((prev) => {
                      const next = [...prev];
                      next[index] = !next[index];
                      return next;
                    });
                  } else {
                    setItemOpened((prev) => prev === index ? null : index);
                  }
                },
                className: D(
                  "flex flex-grow shrink-0 items-center p-3 gap-1 justify-between w-full",
                  "font-semibold cursor-pointer select-none text-left text-[110%] ",
                  isOpen && "rounded-b-none border-b"
                ),
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("flex flex-grow shrink-0 flex-row items-center gap-1"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                    TextContent,
                    {
                      propPath: `items.${index}.title`,
                      className: D("w-full", editable && "cursor-text"),
                      brickId: brick.id,
                      content: item.title,
                      rawContent: item.title,
                      editable,
                      inline: true
                    }
                  ) }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(MdKeyboardArrowRight, { className: D("transition-transform", isOpen && "rotate-90") })
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("transition-all duration-900 ease-in-out p-3 flex-1", !isOpen && "hidden"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
              TextContent,
              {
                propPath: `items.${index}.content`,
                className: D("w-full", editable && "cursor-text"),
                brickId: brick.id,
                content: item.content,
                rawContent: item.content,
                editable
              }
            ) })
          ] }, index);
        })
      ]
    }
  );
}
export {
  Accordion as default
};
//# sourceMappingURL=accordion.js.map
