import { j as e } from "../../../../../../../_virtual/jsx-runtime.js";
import { nanoid as k } from "../../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { useState as z, useMemo as D } from "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import P from "../../ModalSearchImage.js";
import { fieldLabel as r } from "../form-class.js";
import { debounce as T } from "lodash-es";
import { IoMdClose as E } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io/index.js";
import { FieldTitle as p } from "../field-factory.js";
import { useUploader as M } from "../../UploaderContext.js";
import { useDynamicTextEditor as R } from "../../../hooks/use-editable-text.js";
import { usePageQueries as U } from "../../../../../../../use-page-data.js";
import { a as x } from "../../../../../../sdk/dist/shared/chunk-QGYZ7CG5.js";
import "../../../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { Button as f } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as Q } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as h, Trigger as u, Content as g, Group as j, Item as b } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const ne = (o) => {
  const { schema: i, formData: A, onChange: v, title: n, description: c, currentValue: a, brickId: B, noDynamic: N } = o, [w, t] = z(!1), m = D(() => k(), []), { onImageUpload: C } = M(), y = U(), F = (s) => {
    l({ src: s });
  }, S = R({
    ...o,
    currentValue: a?.src,
    onChange: F
  }), l = (s) => {
    v({ ...a ?? {}, ...s });
  }, V = T(l, 300);
  return y.length > 0 && !N && !i["ui:no-dynamic"] ? /* @__PURE__ */ e.jsxs("div", { className: "field field-string basis-full flex flex-col gap-1 max-w-full", children: [
    /* @__PURE__ */ e.jsx(p, { title: n, description: c }),
    /* @__PURE__ */ e.jsx("div", { className: "field field-string flex items-start gap-1.5 max-w-full", children: S })
  ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
    /* @__PURE__ */ e.jsxs("div", { className: "file-field flex items-center gap-1 flex-1", children: [
      /* @__PURE__ */ e.jsx(p, { title: n, description: c }),
      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 flex-1", children: [
        /* @__PURE__ */ e.jsx(
          "input",
          {
            id: m,
            type: "file",
            className: "overflow-hidden w-[0.1px] h-[0.1px] opacity-0 absolute -z-10",
            accept: i["ui:accept"],
            onChange: async (s) => {
              const d = s.target.files?.[0];
              if (d) {
                const I = await C(d);
                l({ src: I });
              }
            }
          }
        ),
        /* @__PURE__ */ e.jsx("span", { className: "flex-1", children: " " }),
        /* @__PURE__ */ e.jsx(
          f,
          {
            variant: "soft",
            size: "1",
            radius: "full",
            type: "button",
            children: /* @__PURE__ */ e.jsx(
              "label",
              {
                className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]",
                htmlFor: m,
                children: "Upload image"
              }
            )
          }
        ),
        i["ui:show-img-search"] && /* @__PURE__ */ e.jsx(f, { variant: "soft", size: "1", radius: "full", type: "button", onClick: () => t(!0), children: /* @__PURE__ */ e.jsx("span", { className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]", children: "Search" }) })
      ] })
    ] }),
    a?.src && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
      /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0" }),
      /* @__PURE__ */ e.jsxs("div", { className: "border border-upstart-200 p-1.5 bg-white mt-3 ml-auto w-full h-auto max-h-[120px] relative", children: [
        /* @__PURE__ */ e.jsx("img", { src: a.src, alt: "Preview", className: "w-full h-auto max-h-[100px] object-cover" }),
        /* @__PURE__ */ e.jsx("div", { className: "absolute flex items-center justify-center top-1 right-1 text-gray-500 p-0.5 bg-white cursor-pointer hover:(bg-red-800 text-white) rounded border border-gray-300 shadow-sm", children: /* @__PURE__ */ e.jsx(E, { className: "w-4 h-4 ", onClick: () => l({ src: "" }) }) })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0" }),
      !i["ui:no-alt-text"] && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between gap-12 flex-1 items-center mt-3", children: [
          /* @__PURE__ */ e.jsx("label", { className: r, children: "Alt text" }),
          /* @__PURE__ */ e.jsx(
            Q,
            {
              defaultValue: a.alt,
              className: "!flex-1",
              onChange: (s) => V({ alt: s.target.value }),
              spellCheck: !!i["ui:spellcheck"]
            }
          )
        ] }),
        /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0" })
      ] }),
      !i["ui:no-object-options"] && /* @__PURE__ */ e.jsxs("div", { className: "flex gap-12 flex-1 mt-3 pr-1.5", children: [
        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 flex-1 pl-1", children: [
          /* @__PURE__ */ e.jsx("label", { className: r, children: "Fit" }),
          /* @__PURE__ */ e.jsxs(
            h,
            {
              defaultValue: a?.fit,
              size: "2",
              onValueChange: (s) => l({ fit: s }),
              children: [
                /* @__PURE__ */ e.jsx(u, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ e.jsx(g, { position: "popper", children: /* @__PURE__ */ e.jsx(j, { children: x(i.properties.fit).map((s) => /* @__PURE__ */ e.jsx(b, { value: s.const, children: s.title }, s.const)) }) })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
          /* @__PURE__ */ e.jsx("label", { className: r, children: "Position" }),
          /* @__PURE__ */ e.jsxs(
            h,
            {
              defaultValue: a.position,
              size: "2",
              onValueChange: (s) => l({ position: s }),
              children: [
                /* @__PURE__ */ e.jsx(u, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ e.jsx(g, { position: "popper", children: /* @__PURE__ */ e.jsx(j, { children: x(i.properties.position).map((s) => /* @__PURE__ */ e.jsx(b, { value: s.const, children: s.title }, s.const)) }) })
              ]
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ e.jsx(
      P,
      {
        open: w,
        onClose: () => {
          t(!1);
        },
        onChoose: (s) => {
          l({ src: s }), t(!1);
        }
      }
    )
  ] });
};
export {
  ne as default
};
//# sourceMappingURL=image.js.map
