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