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