"use client";
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { useSettings as W } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as G } from "../../../../../store/selectors.js";
import { SettingsType as V } from "../../types/index.js";
import { Unit as t } from "../../types/style.js";
import { generateUnitValue as c } from "../../utils/style.js";
import { useAppSelector as J } from "../../hooks/use-app-selector.js";
import { classNames as D } from "../../../../../utils.js";
import { useRef as K } from "react";
import { AiOutlineGlobal as Q } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { BsCheck2 as Y } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as Z } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
import { Label as _ } from "../shared/label.js";
import { Popover as a } from "../shared/popover.js";
import { ScrollArea as X } from "../shared/scroll-area.js";
import { Tooltip as d } from "../shared/tooltip.js";
import { SelectControl as m } from "./select.control.js";
import { SliderUnitControl as s } from "./slider-unit.control.js";
import { handlePopoverScroll as ee } from "../../utils/popover.js";
import { FontFamilyControl as oe } from "./font-family.control.js";
const Ce = ({
  mode: f,
  type: n,
  fieldName: h,
  label: v = "Typography",
  className: I,
  showPresets: j = !0,
  side: g = "bottom",
  align: N = "end",
  avoidCollisions: x = !1
}) => {
  const r = f ? `${h}.${f}` : h, [p, q] = W(r, n), [u] = W(
    "typography.presets",
    V.THEME
  ), l = J(G), S = K(null), b = (o) => {
    ee(o, S.current);
  };
  return /* @__PURE__ */ i("div", { className: D("mt-4 flex items-center", I), ref: S, children: [
    v && /* @__PURE__ */ e(_, { className: "flex-grow", children: v }),
    j && // Custom Fonts
    /* @__PURE__ */ i(a, { onOpenChange: (o) => b(o), children: [
      /* @__PURE__ */ i(d, { children: [
        /* @__PURE__ */ e(d.Trigger, { children: /* @__PURE__ */ e(a.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-l border border-r-0 px-[10px] py-2", children: /* @__PURE__ */ e(Q, { className: "text-sm" }) }) }) }),
        /* @__PURE__ */ e(d.Content, { children: "Custom" })
      ] }),
      /* @__PURE__ */ i(
        a.Content,
        {
          className: "w-[260px] p-0",
          avoidCollisions: x,
          side: g,
          align: N,
          alignOffset: -35,
          children: [
            /* @__PURE__ */ e("p", { className: "border-b px-5 py-3", children: "Custom Fonts" }),
            /* @__PURE__ */ e(X, { className: "h-[400px]", children: u == null ? void 0 : u.map((o) => {
              var C, y, T, w, E, $, M, B, F, L, O, k, z, P, R, A, H, U;
              return /* @__PURE__ */ i(
                "div",
                {
                  onClick: () => {
                    q({
                      presetId: o.id
                    });
                  },
                  className: "flex cursor-pointer items-center p-3 hover:bg-gray-50",
                  children: [
                    /* @__PURE__ */ e(
                      Y,
                      {
                        className: D(
                          "me-2 h-4 w-4",
                          (p == null ? void 0 : p.presetId) === o.id ? "opacity-100" : "opacity-0"
                        )
                      }
                    ),
                    /* @__PURE__ */ e(
                      "p",
                      {
                        style: {
                          fontFamily: (y = (C = o.value) == null ? void 0 : C.fontFamily) == null ? void 0 : y.desktop,
                          fontSize: c((w = (T = o.value) == null ? void 0 : T.fontSize) == null ? void 0 : w[l]),
                          fontWeight: ($ = (E = o.value) == null ? void 0 : E.fontWeight) == null ? void 0 : $[l],
                          textTransform: (B = (M = o.value) == null ? void 0 : M.textTransform) == null ? void 0 : B[l],
                          fontStyle: (L = (F = o.value) == null ? void 0 : F.fontStyle) == null ? void 0 : L[l],
                          textDecoration: (k = (O = o.value) == null ? void 0 : O.textDecoration) == null ? void 0 : k[l],
                          lineHeight: c((P = (z = o.value) == null ? void 0 : z.lineHeight) == null ? void 0 : P[l]),
                          letterSpacing: c(
                            (A = (R = o.value) == null ? void 0 : R.letterSpacing) == null ? void 0 : A[l]
                          ),
                          wordSpacing: c(
                            (U = (H = o.value) == null ? void 0 : H.wordSpacing) == null ? void 0 : U[l]
                          )
                        },
                        children: o.name
                      }
                    )
                  ]
                },
                o.id
              );
            }) }),
            /* @__PURE__ */ e(a.Arrow, { width: 16, height: 8, fill: "white" })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ i(a, { onOpenChange: (o) => b(o), children: [
      /* @__PURE__ */ e(a.Trigger, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "cursor-pointer rounded-r border px-[10px] py-2", children: /* @__PURE__ */ e(Z, {}) }) }),
      /* @__PURE__ */ i(
        a.Content,
        {
          className: "w-[260px] p-0",
          avoidCollisions: x,
          side: g,
          align: N,
          children: [
            /* @__PURE__ */ e("h3", { className: "border-b px-5 py-3", children: "Typography" }),
            /* @__PURE__ */ i(X, { className: "h-[400px] px-5", children: [
              /* @__PURE__ */ e(
                oe,
                {
                  responsive: !0,
                  type: n,
                  fieldName: `${r}.fontFamily`,
                  label: "Font Family"
                }
              ),
              /* @__PURE__ */ e(
                s,
                {
                  responsive: !0,
                  type: n,
                  label: "Size",
                  fieldName: `${r}.fontSize`,
                  units: [t.PX, t.REM, t.EM]
                }
              ),
              /* @__PURE__ */ e(
                m,
                {
                  responsive: !0,
                  fieldName: `${r}.fontWeight`,
                  type: n,
                  label: "Weight",
                  options: [
                    { content: "100 (Thin)", value: "100" },
                    { content: "200 (Extra Light)", value: "200" },
                    { content: "300 (Light)", value: "300" },
                    { content: "400 (Normal)", value: "400" },
                    { content: "500 (Medium)", value: "500" },
                    { content: "600 (Semi Bold)", value: "600" },
                    { content: "700 (Bold)", value: "700" },
                    { content: "800 (Extra Bold)", value: "800" },
                    { content: "900 (Black)", value: "900" },
                    { content: "Normal", value: "normal" },
                    { content: "Bold", value: "bold" }
                  ],
                  className: "mt-4"
                }
              ),
              /* @__PURE__ */ e(
                m,
                {
                  responsive: !0,
                  type: n,
                  fieldName: `${r}.textTransform`,
                  label: "Transform",
                  options: [
                    { content: "Uppercase", value: "uppercase" },
                    { content: "Lowercase", value: "lowercase" },
                    { content: "Capitalize", value: "capitalize" },
                    { content: "Normal", value: "none" }
                  ]
                }
              ),
              /* @__PURE__ */ e(
                m,
                {
                  responsive: !0,
                  type: n,
                  fieldName: `${r}.fontStyle`,
                  label: "Style",
                  options: [
                    { content: "Normal", value: "normal" },
                    { content: "Italic", value: "italic" },
                    { content: "Oblique", value: "oblique" }
                  ]
                }
              ),
              /* @__PURE__ */ e(
                m,
                {
                  responsive: !0,
                  type: n,
                  fieldName: `${r}.textDecoration`,
                  label: "Decoration",
                  options: [
                    { content: "Underline", value: "underline" },
                    { content: "Overline", value: "overline" },
                    { content: "Line Through", value: "line-through" },
                    { content: "None", value: "none" }
                  ]
                }
              ),
              /* @__PURE__ */ e(
                s,
                {
                  responsive: !0,
                  type: n,
                  label: "Line Height",
                  fieldName: `${r}.lineHeight`,
                  units: [t.PX, t.REM, t.EM]
                }
              ),
              /* @__PURE__ */ e(
                s,
                {
                  responsive: !0,
                  type: n,
                  label: "Letter Spacing",
                  fieldName: `${r}.letterSpacing`,
                  units: [t.PX, t.REM, t.EM]
                }
              ),
              /* @__PURE__ */ e(
                s,
                {
                  responsive: !0,
                  type: n,
                  label: "Word Spacing",
                  fieldName: `${r}.wordSpacing`,
                  units: [t.PX, t.REM, t.EM]
                }
              )
            ] }),
            /* @__PURE__ */ e(a.Arrow, { width: 16, height: 8, fill: "white" })
          ]
        }
      )
    ] })
  ] });
};
export {
  Ce as TypographyControl
};
//# sourceMappingURL=typography.control.js.map
