"use client";
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { ScrollArea as l } from "../../shared/scroll-area.js";
import { useActionContext as m } from "../../../contexts/action-context.js";
import { ThemeSettingsType as i } from "../../../types/index.js";
import { BuilderRightPanelType as c } from "../../../store/app-slice.js";
import { useState as a } from "react";
import { BsFiletypeCss as p } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiSettings as d, FiX as h, FiLink as f } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { LiaAngleRightSolid as u } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lia/index.js";
import { RxButton as T } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
import { TbTypography as S } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tb/index.js";
import { TfiLayout as g } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
import { VscSymbolColor as C } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/vsc/index.js";
import b from "./theme-action-dropdown.js";
import N from "./theme-button-settings.js";
import v from "./theme-color-settings.js";
import y from "./theme-custom-css-settings.js";
import L from "./theme-layout-settings.js";
import x from "./theme-link-settings.js";
import O from "./theme-typography-settings.js";
const o = ({ label: s, icon: t, onClick: n }) => /* @__PURE__ */ r(
  "div",
  {
    onClick: n,
    className: "flex cursor-pointer items-center justify-between px-4 py-3 hover:bg-slate-50",
    children: [
      /* @__PURE__ */ r("div", { className: "flex items-center", children: [
        t && /* @__PURE__ */ e("div", { className: "w-4", children: t }),
        /* @__PURE__ */ e("div", { className: "ms-2", children: s })
      ] }),
      /* @__PURE__ */ e(u, {})
    ]
  }
), k = () => {
  const [s, t] = a(i.GLOBAL), { toggleRightPanel: n } = m();
  switch (s) {
    case i.LAYOUT:
      return /* @__PURE__ */ e(L, { setCurrentSetting: t });
    case i.COLOR:
      return /* @__PURE__ */ e(v, { setCurrentSetting: t });
    case i.TYPOGRAPHY:
      return /* @__PURE__ */ e(O, { setCurrentSetting: t });
    case i.BUTTON:
      return /* @__PURE__ */ e(N, { setCurrentSetting: t });
    case i.LINK:
      return /* @__PURE__ */ e(x, { setCurrentSetting: t });
    case i.CUSTOM_CSS:
      return /* @__PURE__ */ e(y, { setCurrentSetting: t });
    default:
      return /* @__PURE__ */ r("div", { className: "relative", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 border-b p-4 text-base font-semibold", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
            /* @__PURE__ */ e(d, {}),
            "Theme Settings"
          ] }),
          /* @__PURE__ */ e(
            "button",
            {
              className: "text-slate-600 hover:text-slate-900",
              onClick: () => {
                n(c.SETTINGS);
              },
              children: /* @__PURE__ */ e(h, { size: 16 })
            }
          )
        ] }),
        /* @__PURE__ */ e("div", { className: "border-b", children: /* @__PURE__ */ r("div", { className: "divide-y", children: [
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.LAYOUT),
              label: "Layout",
              icon: /* @__PURE__ */ e(g, { size: 16 })
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.COLOR),
              label: "Colors",
              icon: /* @__PURE__ */ e(C, { size: 16 })
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.TYPOGRAPHY),
              label: "Typography",
              icon: /* @__PURE__ */ e(S, { size: 16 })
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.BUTTON),
              label: "Button",
              icon: /* @__PURE__ */ e(T, { size: 16 })
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.LINK),
              label: "Link",
              icon: /* @__PURE__ */ e(f, {})
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              onClick: () => t(i.CUSTOM_CSS),
              label: "Custom CSS",
              icon: /* @__PURE__ */ e(p, { size: 18 })
            }
          )
        ] }) })
      ] });
  }
}, q = () => /* @__PURE__ */ r("div", { children: [
  /* @__PURE__ */ e(l, { className: "h-[calc(100vh-115px)]", children: /* @__PURE__ */ e("div", { className: "panel-scroll-content", children: /* @__PURE__ */ e(k, {}) }) }),
  /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 w-full p-4", children: /* @__PURE__ */ e(b, {}) })
] });
export {
  q as default
};
//# sourceMappingURL=theme-settings.js.map
