"use client";
import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { Input as k } from "../shared/input.js";
import { Label as v } from "../shared/label.js";
import { Select as c } from "../shared/select.js";
import { Tooltip as C } from "../shared/tooltip.js";
import { useSettings as I } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as O } from "../../../../../store/selectors.js";
import { Unit as N } from "../../types/style.js";
import { useAppSelector as P } from "../../hooks/use-app-selector.js";
import { classNames as $ } from "../../utils/index.js";
import { useState as U, useEffect as w } from "react";
import { MdLink as A, MdLinkOff as D } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { BreakpointSelector as G } from "../shared/breakpoint-selector.js";
import M from "../../hooks/use-debounce.js";
const R = [N.PX, N.PERCENTAGE], tt = ({
  className: L,
  units: m = R,
  min: d,
  max: f,
  responsive: n,
  mode: g,
  fieldName: x,
  type: S,
  label: b,
  ...T
}) => {
  const a = P(O), [o, B] = I(
    n && g ? `${x}.${a}.${g}` : n ? `${x}.${a}` : g ? `${x}.${g}` : x,
    S
  ), [t, i] = U(
    o ?? {
      top: void 0,
      right: void 0,
      bottom: void 0,
      left: void 0,
      unit: m[0] ?? N.PX,
      linked: !1
    }
  ), e = M(t, 400);
  w(() => {
    ((o == null ? void 0 : o.top) !== (e == null ? void 0 : e.top) || (o == null ? void 0 : o.right) !== (e == null ? void 0 : e.right) || (o == null ? void 0 : o.bottom) !== (e == null ? void 0 : e.bottom) || (o == null ? void 0 : o.left) !== (e == null ? void 0 : e.left) || (o == null ? void 0 : o.unit) !== (e == null ? void 0 : e.unit) || (o == null ? void 0 : o.linked) !== (e == null ? void 0 : e.linked)) && B(e);
  }, [e]), w(() => {
    ((o == null ? void 0 : o.top) !== (t == null ? void 0 : t.top) || (o == null ? void 0 : o.right) !== (t == null ? void 0 : t.right) || (o == null ? void 0 : o.bottom) !== (t == null ? void 0 : t.bottom) || (o == null ? void 0 : o.left) !== (t == null ? void 0 : t.left) || (o == null ? void 0 : o.unit) !== (t == null ? void 0 : t.unit) || (o == null ? void 0 : o.linked) !== (t == null ? void 0 : t.linked)) && i(o);
  }, [o]);
  const l = (s, j) => {
    const h = s === "" ? void 0 : Number(s);
    t != null && t.linked ? i({
      ...t,
      top: h,
      right: h,
      bottom: h,
      left: h,
      unit: (t == null ? void 0 : t.unit) ?? m[0]
    }) : i({
      ...t,
      [j]: h,
      unit: (t == null ? void 0 : t.unit) ?? m[0]
    });
  }, y = (s) => {
    i(s ? {
      ...t,
      top: t == null ? void 0 : t.top,
      right: t == null ? void 0 : t.top,
      bottom: t == null ? void 0 : t.top,
      left: t == null ? void 0 : t.top,
      linked: s,
      unit: (t == null ? void 0 : t.unit) ?? m[0]
    } : {
      ...t,
      linked: s
    });
  }, E = (s) => {
    i({ ...t, unit: s });
  };
  return /* @__PURE__ */ p("div", { className: $("mt-4", L), ...T, children: [
    b && /* @__PURE__ */ p(v, { className: "mb-1.5 flex items-center gap-1", children: [
      b,
      " ",
      n && /* @__PURE__ */ r(G, {})
    ] }),
    /* @__PURE__ */ p("div", { className: "flex w-full gap-0.5", children: [
      /* @__PURE__ */ p("div", { children: [
        /* @__PURE__ */ r(
          k,
          {
            min: d,
            max: f,
            onChange: (s) => l(s.target.value, "top"),
            value: (t == null ? void 0 : t.top) ?? "",
            type: "number"
          }
        ),
        /* @__PURE__ */ r("p", { className: "mt-0.5 text-center text-[10px] text-slate-400", children: "Top" })
      ] }),
      /* @__PURE__ */ p("div", { children: [
        /* @__PURE__ */ r(
          k,
          {
            min: d,
            max: f,
            onChange: (s) => l(s.target.value, "right"),
            value: (t == null ? void 0 : t.right) ?? "",
            type: "number"
          }
        ),
        /* @__PURE__ */ r("p", { className: "mt-0.5 text-center text-[10px] text-slate-400", children: "Right" })
      ] }),
      /* @__PURE__ */ p("div", { children: [
        /* @__PURE__ */ r(
          k,
          {
            min: d,
            max: f,
            onChange: (s) => l(s.target.value, "bottom"),
            value: (t == null ? void 0 : t.bottom) ?? "",
            type: "number"
          }
        ),
        /* @__PURE__ */ r("p", { className: "mt-0.5 text-center text-[10px] text-slate-400", children: "Bottom" })
      ] }),
      /* @__PURE__ */ p("div", { children: [
        /* @__PURE__ */ r(
          k,
          {
            min: d,
            max: f,
            onChange: (s) => l(s.target.value, "left"),
            value: (t == null ? void 0 : t.left) ?? "",
            type: "number"
          }
        ),
        /* @__PURE__ */ r("p", { className: "mt-0.5 text-center text-[10px] text-slate-400", children: "Left" })
      ] }),
      /* @__PURE__ */ p("div", { children: [
        /* @__PURE__ */ r(
          "div",
          {
            className: $("w-full rounded-sm border border-slate-300", {
              "bg-slate-100": !(t != null && t.linked)
            }),
            children: /* @__PURE__ */ p(C, { children: [
              /* @__PURE__ */ r(C.Trigger, { asChild: !0, children: t != null && t.linked ? /* @__PURE__ */ r(
                "div",
                {
                  onClick: () => y(!1),
                  className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-slate-100",
                  children: /* @__PURE__ */ r(A, { className: "text-slate-600" })
                }
              ) : /* @__PURE__ */ r(
                "div",
                {
                  onClick: () => y(!0),
                  className: "cursor-pointer rounded-sm px-3 py-[7px] hover:bg-slate-100",
                  children: /* @__PURE__ */ r(D, { className: "text-slate-600" })
                }
              ) }),
              /* @__PURE__ */ r(C.Content, { children: "Link values together" })
            ] })
          }
        ),
        /* @__PURE__ */ p(
          c,
          {
            value: (t == null ? void 0 : t.unit) || m[0],
            onValueChange: (s) => E(s),
            children: [
              /* @__PURE__ */ r(
                c.Trigger,
                {
                  className: "mx-auto h-auto w-auto border-none p-0 text-[10px] text-slate-400 hover:text-slate-600 hover:underline focus:underline",
                  chevronDown: !1,
                  children: /* @__PURE__ */ r(c.Value, { placeholder: "px" })
                }
              ),
              /* @__PURE__ */ r(c.Content, { alignOffset: -10, sideOffset: -20, className: "min-w-[38px] border-0", children: /* @__PURE__ */ r(c.Group, { children: m.map((s) => /* @__PURE__ */ r(
                c.Item,
                {
                  showCheck: !1,
                  value: s,
                  className: "flex items-center justify-center py-1.5 ps-2 text-xs",
                  children: s
                },
                s
              )) }) })
            ]
          }
        )
      ] })
    ] })
  ] });
};
export {
  tt as SpacingControl
};
//# sourceMappingURL=spacing.control.js.map
