"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { Input as m } from "../shared/input.js";
import { Popover as i } from "../shared/popover.js";
import { BsFillSquareFill as x } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as C } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
import { ColorPicker as y } from "../shared/color-picker.js";
import { Label as n } from "../shared/label.js";
import { Select as a } from "../shared/select.js";
import { useAppSelector as b } from "../../hooks/use-app-selector.js";
import { useSettings as k } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as B } from "../../../../../store/selectors.js";
import { classNames as $ } from "../../../../../utils.js";
import { BreakpointSelector as P } from "../shared/breakpoint-selector.js";
const D = ({
  mode: c,
  className: g,
  responsive: d,
  fieldName: o = "boxShadow",
  label: u = "Box Shadow",
  type: f
}) => {
  const p = b(B), [r, h] = k(
    d && c ? `${o}.${p}.${c}` : d ? `${o}.${p}` : c ? `${o}.${c}` : o,
    f
  ), s = (t, v) => {
    h((N) => ({
      ...N,
      [v]: t
    }));
  };
  return /* @__PURE__ */ l("div", { className: $("mt-4 flex justify-between", g), children: [
    u && /* @__PURE__ */ l(n, { className: "flex items-center gap-1", children: [
      u,
      " ",
      d && /* @__PURE__ */ e(P, {})
    ] }),
    /* @__PURE__ */ l(i, { children: [
      /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "rounded border bg-gray-50 px-3 py-1.5 transition-colors duration-200 hover:bg-gray-300", children: /* @__PURE__ */ e(C, {}) }) }),
      /* @__PURE__ */ e(i.Portal, { children: /* @__PURE__ */ l(i.Content, { align: "end", alignOffset: -8, className: "w-[260px] bg-white p-4", children: [
        /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ e(n, { children: "Color" }),
          /* @__PURE__ */ l(i, { children: [
            /* @__PURE__ */ e(i.Trigger, { className: "rounded-xs border p-1", children: /* @__PURE__ */ e(x, { style: { color: r == null ? void 0 : r.color }, className: "rounded-xs" }) }),
            /* @__PURE__ */ l(i.Content, { className: "p-0", children: [
              /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
              /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
                y,
                {
                  color: r == null ? void 0 : r.color,
                  onChange: (t) => {
                    h({
                      ...r,
                      color: t
                    });
                  }
                }
              ) })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-4 grid grid-cols-2 gap-3", children: [
          /* @__PURE__ */ l("div", { children: [
            /* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Horizontal" }),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                value: (r == null ? void 0 : r.horizontal) ?? "",
                min: -100,
                max: 100,
                className: "w-full",
                onChange: (t) => {
                  s(Number(t.target.value), "horizontal");
                }
              }
            )
          ] }),
          /* @__PURE__ */ l("div", { children: [
            /* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Vertical" }),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                value: (r == null ? void 0 : r.vertical) ?? "",
                onChange: (t) => {
                  s(Number(t.target.value), "vertical");
                },
                min: -100,
                max: 100,
                className: "w-full"
              }
            )
          ] }),
          /* @__PURE__ */ l("div", { children: [
            /* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Blur" }),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                value: (r == null ? void 0 : r.blur) ?? "",
                onChange: (t) => {
                  s(Number(t.target.value), "blur-sm");
                },
                min: 0,
                max: 100,
                className: "w-full"
              }
            )
          ] }),
          /* @__PURE__ */ l("div", { children: [
            /* @__PURE__ */ e(n, { className: "mb-1.5 block text-xs text-gray-800", children: "Spread" }),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                value: (r == null ? void 0 : r.spread) ?? "",
                onChange: (t) => {
                  s(Number(t.target.value), "spread");
                },
                min: 0,
                max: 100,
                className: "w-full"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-4 grid grid-cols-2 items-center gap-1.5", children: [
          /* @__PURE__ */ e(n, { children: "Position" }),
          /* @__PURE__ */ l(
            a,
            {
              value: (r == null ? void 0 : r.position) || "select",
              onValueChange: (t) => {
                s(t, "position");
              },
              children: [
                /* @__PURE__ */ e(a.Trigger, { children: /* @__PURE__ */ e(a.Value, {}) }),
                /* @__PURE__ */ l(a.Content, { children: [
                  /* @__PURE__ */ e(a.Item, { value: "outset", children: "Outset" }),
                  /* @__PURE__ */ e(a.Item, { value: "inset", children: "Inset" })
                ] })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ e(i.Arrow, { width: 16, height: 8, fill: "white" })
      ] }) })
    ] })
  ] });
};
export {
  D as BoxShadowControl
};
//# sourceMappingURL=box-shadow.control.js.map
