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