import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { usePanel, usePreviewMode, useSelectedBrickId, useSelectedSection, useEditorHelpers } from "../../../../../use-editor.js";
import { RxCross2 } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/rx/index.js";
import { LuPanelLeft, LuPanelRight } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/lu/index.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import SettingsForm from "./PanelAttributes.js";
import ThemePanel from "./PanelTheme.js";
import PanelBrickInspector from "./PanelBrickInspector.js";
import PanelSectionInspector from "./PanelSectionInspector.js";
import PanelLibrary from "./PanelLibrary.js";
import "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { useBrick } from "../../../../../use-page-data.js";
import { Tooltip as e } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tooltip.js";
function Panel({ className, ...props }) {
  const { panel, panelPosition } = usePanel();
  const previewMode = usePreviewMode();
  const selectedBrickId = useSelectedBrickId();
  const selectedSection = useSelectedSection();
  const { togglePanelPosition, hidePanel } = useEditorHelpers();
  const selectedBrick = useBrick(selectedBrickId);
  if (!panel || panel === "inspector" && !selectedBrick && !selectedSection) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "aside",
    {
      id: "floating-panel",
      className: D(
        `z-[9999] fixed top-0 bottom-0 flex shadow-2xl overscroll-none         min-w-[360px] w-[360px] opacity-100
        bg-white dark:bg-dark-900 border-upstart-300 dark:border-dark-700 overflow-visible`,
        {
          // "transition-transform duration-150": !!panel,
          "transition-all duration-100": !panel,
          "left-0 border-r": panelPosition === "left",
          "right-0 border-l": panelPosition === "right",
          "-translate-x-full opacity-0": !panel && panelPosition === "left",
          "translate-x-full": !panel && panelPosition === "right"
        }
      ),
      ...props,
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-grow relative flex-col", children: [
        previewMode === "desktop" && panel === "library" && /* @__PURE__ */ jsxRuntimeExports.jsx(PanelLibrary, {}),
        panel === "inspector" && selectedBrick && /* @__PURE__ */ jsxRuntimeExports.jsx(PanelBrickInspector, { brick: selectedBrick }),
        panel === "inspector" && !selectedBrick && selectedSection && /* @__PURE__ */ jsxRuntimeExports.jsx(PanelSectionInspector, { section: selectedSection }),
        panel === "theme" && /* @__PURE__ */ jsxRuntimeExports.jsx(ThemePanel, {}),
        panel === "settings" && /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsForm, {}),
        panel && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Close panel", delayDuration: 500, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              className: D(
                "absolute z-[9999] aspect-square h-7 w-7 top-0 flex justify-center items-center bg-gradient-to-tr from-red-800 to-red-700 hover:(opacity-80 text-white) border border-t-0 border-red-900 text-white/90",
                panelPosition === "right" ? "-left-7 rounded-bl" : "-right-7 rounded-br"
              ),
              onClick: () => {
                hidePanel();
              },
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(RxCross2, { className: "h-4 w-4" })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(
            "button",
            {
              type: "button",
              className: D(
                "absolute z-[9999] aspect-square h-8 w-8 bottom-0 flex justify-center items-center bg-gray-100 hover:(bg-upstart-100 text-upstart-800) backdrop-blur-md border border-b-0 border-upstart-200 text-black/50",
                panelPosition === "right" ? "-left-8 rounded-tl border-r-0" : "-right-8 rounded-tr border-l-0"
              ),
              onClick: () => {
                togglePanelPosition();
              },
              children: [
                panelPosition === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(LuPanelLeft, { className: "h-5 w-5" }),
                panelPosition === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(LuPanelRight, { className: "h-5 w-5" })
              ]
            }
          )
        ] })
      ] })
    }
  );
}
export {
  Panel as default
};
//# sourceMappingURL=Panel.js.map
