"use client";
import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { BreakpointSelector as d } from "../shared/breakpoint-selector.js";
import { ToggleGroupControl as f } from "./toggle-group.control.js";
import { InfoMessage as N } from "../shared/info-message.js";
import { Input as h } from "../shared/input.js";
import { Label as v } from "../shared/label.js";
import { useAppSelector as x } from "../../hooks/use-app-selector.js";
import { useSettings as n } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as C } from "../../../../../store/selectors.js";
import { classNames as m } from "../../utils/index.js";
import { BiDotsVerticalRounded as w } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { RxPinLeft as T, RxPinRight as B } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
const G = ({
  type: s,
  className: a,
  fieldName: l,
  customFieldName: c,
  label: p
}) => {
  const e = x(C), [o] = n(l, s), [r, g] = n(c, s);
  return /* @__PURE__ */ i("div", { className: m("mt-4", a), children: [
    /* @__PURE__ */ t(
      f,
      {
        type: s,
        fieldName: "flexOrder",
        label: p,
        responsive: !0,
        controls: [
          {
            tooltipContent: "Start",
            toggleTrigger: /* @__PURE__ */ t(T, { className: "text-sm" }),
            value: "start"
          },
          {
            tooltipContent: "End",
            toggleTrigger: /* @__PURE__ */ t(B, { className: "text-sm" }),
            value: "end"
          },
          {
            tooltipContent: "Custom",
            toggleTrigger: /* @__PURE__ */ t(w, { className: "text-sm" }),
            value: "custom"
          }
        ]
      }
    ),
    /* @__PURE__ */ t(
      "div",
      {
        className: m(
          "grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
          {
            "grid-rows-[1fr]": (o == null ? void 0 : o[e]) === "custom"
          }
        ),
        children: /* @__PURE__ */ t(
          "div",
          {
            className: m("min-h-0", {
              "h-auto": (o == null ? void 0 : o[e]) === "custom"
            }),
            children: /* @__PURE__ */ i(v, { className: "mt-3 flex items-center", children: [
              "Custom Order ",
              /* @__PURE__ */ t(d, { className: "ms-1" }),
              /* @__PURE__ */ t(
                h,
                {
                  value: (r == null ? void 0 : r[e]) ?? 0,
                  onChange: (u) => g({
                    ...r,
                    [e]: Number(u.target.value)
                  }),
                  type: "number",
                  className: "ms-auto w-[60px]",
                  min: 0
                }
              )
            ] })
          }
        )
      }
    ),
    /* @__PURE__ */ t(N, { children: "This control will affect contained elements only." })
  ] });
};
export {
  G as FlexOrderControl
};
//# sourceMappingURL=flex-order.control.js.map
