"use client";
import { jsxs as C, jsx as o } from "react/jsx-runtime";
import { useSettings as N } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as R } from "../../../../../store/selectors.js";
import { DisplayType as l, FlexDirection as t, JustifyContent as a, AlignItem as s, FlexWrap as p, Unit as g } from "../../types/style.js";
import { useAppSelector as O } from "../../hooks/use-app-selector.js";
import { classNames as r } from "../../../../../utils.js";
import { BsArrowBarRight as v } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { HiOutlineArrowNarrowRight as L, HiOutlineArrowNarrowDown as f, HiOutlineArrowNarrowLeft as S, HiOutlineArrowNarrowUp as d } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { LuAlignVerticalSpaceAround as T, LuAlignCenter as c } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { MdAlignHorizontalLeft as x, MdOutlineAlignHorizontalCenter as A, MdAlignHorizontalRight as M, MdFormatAlignCenter as U, MdOutlineAlignVerticalTop as V, MdVerticalAlignCenter as _, MdOutlineAlignVerticalBottom as W } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { PiArrowUUpRightLight as w } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
import { FlexGapControl as I } from "./flex-gap.control.js";
import { SelectControl as D } from "./select.control.js";
import { ToggleGroupControl as m } from "./toggle-group.control.js";
const K = ({ type: n, fieldName: i = "display" }) => {
  const E = O(R), { 0: u } = N(
    `${i}.value.${E}`,
    n
  ), { 0: e } = N(
    `${i}.flexDirection.${E}`,
    n
  );
  return /* @__PURE__ */ C("div", { children: [
    /* @__PURE__ */ o(
      D,
      {
        type: n,
        fieldName: `${i}.value`,
        label: "Display",
        responsive: !0,
        options: [
          { content: "Block", value: l.BLOCK },
          { content: "Inline", value: l.INLINE },
          { content: "Inline Block", value: l.INLINE_BLOCK },
          { content: "Flex", value: l.FLEX },
          { content: "Inline Flex", value: l.INLINE_FLEX },
          { content: "None", value: l.NONE }
        ]
      }
    ),
    u && [l.FLEX, l.INLINE_FLEX].includes(u) && /* @__PURE__ */ C("div", { children: [
      /* @__PURE__ */ o(
        m,
        {
          fieldName: `${i}.flexDirection`,
          label: "Direction",
          responsive: !0,
          type: n,
          controls: [
            {
              tooltipContent: "Row - horizontal",
              toggleTrigger: /* @__PURE__ */ o(L, { className: "text-sm" }),
              value: t.ROW
            },
            {
              tooltipContent: "Column - vertical",
              toggleTrigger: /* @__PURE__ */ o(f, { className: "text-sm" }),
              value: t.COLUMN
            },
            {
              tooltipContent: "Row Reverse",
              toggleTrigger: /* @__PURE__ */ o(S, { className: "text-sm" }),
              value: t.ROW_REVERSE
            },
            {
              tooltipContent: "Column - Reversed",
              toggleTrigger: /* @__PURE__ */ o(d, { className: "text-sm" }),
              value: t.COLUMN_REVERSE
            }
          ]
        }
      ),
      /* @__PURE__ */ o(
        m,
        {
          type: n,
          fieldName: `${i}.justifyContent`,
          responsive: !0,
          label: "Justify Content",
          direction: "col",
          controls: [
            {
              tooltipContent: "Start",
              toggleTrigger: /* @__PURE__ */ o(
                x,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-90": e === t.COLUMN,
                    "rotate-180": e === t.ROW_REVERSE,
                    "-rotate-90": e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: a.START
            },
            {
              tooltipContent: "Center",
              toggleTrigger: /* @__PURE__ */ o(
                A,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: a.CENTER
            },
            {
              tooltipContent: "End",
              toggleTrigger: /* @__PURE__ */ o(
                M,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-90": e === t.COLUMN,
                    "rotate-180": e === t.ROW_REVERSE,
                    "-rotate-90": e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: a.END
            },
            {
              tooltipContent: "Space Between",
              toggleTrigger: /* @__PURE__ */ o(
                T,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-0": e === t.COLUMN,
                    "rotate-90": e === t.ROW || e === t.ROW_REVERSE
                  })
                }
              ),
              value: a.SPACE_BETWEEN
            },
            {
              tooltipContent: "Space Around",
              toggleTrigger: /* @__PURE__ */ o(
                U,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-0": e === t.COLUMN,
                    "rotate-90": e === t.ROW || e === t.ROW_REVERSE
                  })
                }
              ),
              value: a.SPACE_AROUND
            },
            {
              tooltipContent: "Space Evently",
              toggleTrigger: /* @__PURE__ */ o(
                c,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "rotate-0": e === t.COLUMN,
                    "rotate-90": e === t.ROW || e === t.ROW_REVERSE
                  })
                }
              ),
              value: a.SPACE_EVENTLY
            }
          ]
        }
      ),
      /* @__PURE__ */ o(
        m,
        {
          fieldName: `${i}.alignItems`,
          label: "Align Items",
          responsive: !0,
          type: n,
          controls: [
            {
              tooltipContent: "Start",
              toggleTrigger: /* @__PURE__ */ o(
                V,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: s.START
            },
            {
              tooltipContent: "Center",
              toggleTrigger: /* @__PURE__ */ o(
                _,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: s.CENTER
            },
            {
              tooltipContent: "End",
              toggleTrigger: /* @__PURE__ */ o(
                W,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: s.END
            },
            {
              tooltipContent: "Stretch",
              toggleTrigger: /* @__PURE__ */ o(
                c,
                {
                  className: r("text-sm transition-transform duration-200", {
                    "-rotate-90": e === t.COLUMN || e === t.COLUMN_REVERSE
                  })
                }
              ),
              value: s.STRETCH
            }
          ]
        }
      ),
      /* @__PURE__ */ o(
        m,
        {
          fieldName: `${i}.flexWrap`,
          label: "Wrap",
          responsive: !0,
          type: n,
          controls: [
            {
              tooltipContent: "No Wrap",
              toggleTrigger: /* @__PURE__ */ o(v, { className: "text-sm" }),
              value: p.NOWRAP
            },
            {
              tooltipContent: "Wrap",
              toggleTrigger: /* @__PURE__ */ o(w, { className: "rotate-180 text-sm" }),
              value: p.WRAP
            }
          ]
        }
      ),
      /* @__PURE__ */ o(
        I,
        {
          responsive: !0,
          label: "Gaps",
          fieldName: `${i}.gap`,
          type: n,
          min: 0,
          units: [g.PX, g.EM, g.REM, g.VW]
        }
      )
    ] })
  ] });
};
export {
  K as DisplayControl
};
//# sourceMappingURL=display-control.js.map
