"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { Input as m } from "../shared/input.js";
import { Popover as o } from "../shared/popover.js";
import { RangeSlider as d } from "../shared/range-slider.js";
import { BsFillSquareFill as v } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { CiEdit as C } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ci/index.js";
import { ColorPicker as w } from "../shared/color-picker.js";
import { Label as i } from "../shared/label.js";
import { Select as n } from "../shared/select.js";
import { useAppSelector as V } from "../../hooks/use-app-selector.js";
import { useSettings as S } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as k } from "../../../../../store/selectors.js";
import { classNames as y } from "../../utils/index.js";
import { BreakpointSelector as B } from "../shared/breakpoint-selector.js";
const D = ({
  mode: s,
  className: g,
  responsive: h,
  fieldName: c = "boxShadow",
  label: u = "Box Shadow",
  type: b
}) => {
  const p = V(k), [f, x] = S(
    h && s ? `${c}.${p}.${s}` : h ? `${c}.${p}` : s ? `${c}.${s}` : c,
    b
  ), r = f ?? {
    color: "#ddd",
    horizontal: 0,
    vertical: 0,
    blur: 0,
    spread: 0,
    position: ""
  }, t = (a, N) => {
    x({
      ...r,
      [N]: a
    });
  };
  return /* @__PURE__ */ l("div", { className: y("mt-4 flex justify-between", g), children: [
    u && /* @__PURE__ */ l(i, { className: "flex items-center gap-1", children: [
      u,
      " ",
      h && /* @__PURE__ */ e(B, {})
    ] }),
    /* @__PURE__ */ l(o, { children: [
      /* @__PURE__ */ e(o.Trigger, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "rounded border bg-slate-50 px-3 py-1.5 transition-colors duration-200 hover:bg-slate-300", children: /* @__PURE__ */ e(C, {}) }) }),
      /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ l(o.Content, { align: "end", alignOffset: -8, className: "w-[260px] bg-white p-4", children: [
        /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
          /* @__PURE__ */ e(i, { children: "Color" }),
          /* @__PURE__ */ l(o, { children: [
            /* @__PURE__ */ e(o.Trigger, { className: "rounded-xs border p-1", children: /* @__PURE__ */ e(v, { style: { color: r.color }, className: "rounded-xs" }) }),
            /* @__PURE__ */ l(o.Content, { className: "p-0", children: [
              /* @__PURE__ */ e("p", { className: "px-4 py-3 shadow-md", children: "Color Picker" }),
              /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
                w,
                {
                  color: r.color,
                  onChange: (a) => {
                    x({
                      ...r,
                      color: a
                    });
                  }
                }
              ) })
            ] })
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-4", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block text-xs text-slate-800", children: "Horizontal" }),
          /* @__PURE__ */ l("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              d,
              {
                defaultValue: [r.horizontal ?? 0],
                onValueChange: (a) => {
                  t(a[0], "horizontal");
                },
                max: 100,
                step: 1,
                min: -100
              }
            ),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                defaultValue: r.horizontal ?? "",
                min: -100,
                max: 100,
                className: "w-[60px]",
                onChange: (a) => {
                  t(Number(a.target.value), "horizontal");
                }
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-3", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block text-xs text-slate-800", children: "Vertical" }),
          /* @__PURE__ */ l("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              d,
              {
                defaultValue: [r.vertical ?? 0],
                onValueChange: (a) => {
                  t(a[0], "vertical");
                },
                max: 100,
                step: 1,
                min: -100
              }
            ),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                defaultValue: r.vertical ?? "",
                onChange: (a) => {
                  t(Number(a.target.value), "vertical");
                },
                min: -100,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-3", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block text-xs text-slate-800", children: "Blur" }),
          /* @__PURE__ */ l("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              d,
              {
                defaultValue: [r.blur ?? 0],
                onValueChange: (a) => {
                  t(a[0], "blur-sm");
                },
                max: 100,
                step: 1,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                defaultValue: r.blur ?? "",
                onChange: (a) => {
                  t(Number(a.target.value), "blur-sm");
                },
                min: 0,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-3", children: [
          /* @__PURE__ */ e(i, { className: "mb-1.5 block text-xs text-slate-800", children: "Spread" }),
          /* @__PURE__ */ l("div", { className: "flex gap-1.5", children: [
            /* @__PURE__ */ e(
              d,
              {
                defaultValue: [r.spread ?? 0],
                onValueChange: (a) => {
                  t(a[0], "spread");
                },
                max: 100,
                step: 1,
                min: 0
              }
            ),
            /* @__PURE__ */ e(
              m,
              {
                type: "number",
                defaultValue: r.spread ?? "",
                onChange: (a) => {
                  t(Number(a.target.value), "spread");
                },
                min: 0,
                max: 100,
                className: "w-[60px]"
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l("div", { className: "mt-4 grid grid-cols-2 items-center gap-1.5", children: [
          /* @__PURE__ */ e(i, { children: "Position" }),
          /* @__PURE__ */ l(
            n,
            {
              value: r.position || "",
              onValueChange: (a) => {
                t(a, "position");
              },
              children: [
                /* @__PURE__ */ e(n.Trigger, { children: /* @__PURE__ */ e(n.Value, {}) }),
                /* @__PURE__ */ l(n.Content, { children: [
                  /* @__PURE__ */ e(n.Item, { value: "", children: "Outset" }),
                  /* @__PURE__ */ e(n.Item, { value: "inset", children: "Inset" })
                ] })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ e(o.Arrow, { width: 16, height: 8, fill: "white" })
      ] }) })
    ] })
  ] });
};
export {
  D as BoxShadowControl
};
//# sourceMappingURL=box-shadow.control.js.map
