import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useBrickManifest } from "../../shared/hooks/use-brick-manifest.js";
import { useDraftHelpers } from "../../../../../use-page-data.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { IoIosArrowBack, IoIosArrowUp, IoIosArrowForward, IoIosArrowDown } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io/index.js";
function BrickArrows({ brick }) {
  const draftHelpers = useDraftHelpers();
  const manifest = useBrickManifest(brick.type);
  const canMovePrev = draftHelpers.canMoveTo(brick.id, "previous");
  const canMoveNext = draftHelpers.canMoveTo(brick.id, "next");
  const parentContainer = draftHelpers.getParentBrick(brick.id);
  const isContainerChild = !!parentContainer;
  const parentElement = parentContainer ? document.getElementById(parentContainer.id) : null;
  const flexOrientation = parentElement ? getComputedStyle(parentElement).flexDirection || "row" : "row";
  const canMoveLeft = isContainerChild && canMovePrev && flexOrientation === "row" || !isContainerChild && canMovePrev;
  const canMoveRight = isContainerChild && canMoveNext && flexOrientation === "row" || !isContainerChild && canMoveNext;
  const canMoveUp = isContainerChild && canMovePrev && flexOrientation === "column";
  const canMoveDown = isContainerChild && canMoveNext && flexOrientation === "column";
  const offset = manifest.isContainer ? 9 : 7;
  const baseClass = "absolute z-[9999] flex items-center justify-center h-5 w-5 rounded-full border border-white text-white bg-upstart-500 shadow-lg hover:(bg-upstart-700)";
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    canMoveLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(
      "button",
      {
        type: "button",
        className: D(baseClass, `top-1/2 -left-${offset} transform -translate-y-1/2`),
        onClick: (e) => {
          e.stopPropagation();
          draftHelpers.moveBrick(brick.id, "previous");
        },
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosArrowBack, { className: "w-3 h-3" })
      }
    ),
    canMoveUp && /* @__PURE__ */ jsxRuntimeExports.jsx(
      "button",
      {
        type: "button",
        className: D(baseClass, `-top-${offset} left-1/2 transform -translate-x-1/2`),
        onClick: (e) => {
          e.stopPropagation();
          draftHelpers.moveBrick(brick.id, "previous");
        },
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosArrowUp, { className: "w-3 h-3" })
      }
    ),
    canMoveRight && /* @__PURE__ */ jsxRuntimeExports.jsx(
      "button",
      {
        type: "button",
        className: D(baseClass, `top-1/2 -right-${offset} transform -translate-y-1/2`),
        onClick: (e) => {
          e.stopPropagation();
          draftHelpers.moveBrick(brick.id, "next");
        },
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosArrowForward, { className: "w-3 h-3" })
      }
    ),
    canMoveDown && /* @__PURE__ */ jsxRuntimeExports.jsx(
      "button",
      {
        type: "button",
        className: D(baseClass, `-bottom-${offset} left-1/2 transform -translate-x-1/2`),
        onClick: (e) => {
          e.stopPropagation();
          draftHelpers.moveBrick(brick.id, "next");
        },
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosArrowDown, { className: "w-3 h-3" })
      }
    )
  ] });
}
export {
  BrickArrows as default
};
//# sourceMappingURL=EditableBrickArrows.js.map
