import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { b1 as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
import { a as tx } from "./twind.B1qQmF_s.js";
import { useState } from "react";
import { a as MdKeyboardArrowRight } from "./index.C4ysnl8v.js";
import { T as TextContent } from "./TextContent.V3HF5Ue-.js";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.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,
      className: tx("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: tx("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: tx(
                  "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: tx("flex flex-grow shrink-0 flex-row items-center gap-1"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                    TextContent,
                    {
                      propPath: `items.${index}.title`,
                      className: tx("w-full", editable && "cursor-text"),
                      brickId: brick.id,
                      content: item.title,
                      rawContent: item.title,
                      editable,
                      inline: true
                    }
                  ) }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(MdKeyboardArrowRight, { className: tx("transition-transform", isOpen && "rotate-90") })
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("transition-all duration-900 ease-in-out p-3 flex-1", !isOpen && "hidden"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
              TextContent,
              {
                propPath: `items.${index}.content`,
                className: tx("w-full", editable && "cursor-text"),
                brickId: brick.id,
                content: item.content,
                rawContent: item.content,
                editable
              }
            ) })
          ] }, index);
        })
      ]
    }
  );
}
export {
  Accordion as default
};
//# sourceMappingURL=accordion.CzWRF6nE.js.map
