import { j as e } from "../../../../../../../_virtual/jsx-runtime.js";
import { nanoid as I } from "../../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { useState as k, useMemo as z } 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 D from "../../ModalSearchImage.js";
import { fieldLabel as r } from "../form-class.js";
import { debounce as P } from "lodash-es";
import { IoMdClose as T } from "../../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io/index.js";
import { FieldTitle as x } from "../field-factory.js";
import { useUploader as E } from "../../UploaderContext.js";
import { useDynamicTextEditor as M } from "../../../hooks/use-editable-text.js";
import { usePageQueries as O } from "../../../../../../../use-page-data.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 R } 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 p, Trigger as h, Content as u, Group as g, Item as j } 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 ae = (o) => {
  const { schema: a, formData: U, onChange: b, title: n, description: c, currentValue: i, brickId: Q, noDynamic: v } = o, [N, t] = k(!1), d = z(() => I(), []), { onImageUpload: w } = E(), y = O(), C = (s) => {
    l({ src: s });
  }, F = M({
    ...o,
    currentValue: i?.src,
    onChange: C
  }), l = (s) => {
    b({ ...i ?? {}, ...s });
  }, S = P(l, 300);
  return y.length > 0 && !v && !a["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(x, { title: n, description: c }),
    /* @__PURE__ */ e.jsx("div", { className: "field field-string flex items-start gap-1.5 max-w-full", children: F })
  ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
    /* @__PURE__ */ e.jsxs("div", { className: "file-field flex items-center gap-1 flex-1", children: [
      /* @__PURE__ */ e.jsx(x, { title: n, description: c }),
      /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 flex-1", children: [
        /* @__PURE__ */ e.jsx(
          "input",
          {
            id: d,
            type: "file",
            className: "overflow-hidden w-[0.1px] h-[0.1px] opacity-0 absolute -z-10",
            accept: a["ui:accept"],
            onChange: async (s) => {
              const m = s.target.files?.[0];
              if (m) {
                const V = await w(m);
                l({ src: V });
              }
            }
          }
        ),
        /* @__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: d,
                children: "Upload image"
              }
            )
          }
        ),
        a["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" }) })
      ] })
    ] }),
    i?.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: i.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(T, { className: "w-4 h-4 ", onClick: () => l({ src: "" }) }) })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0" }),
      !a["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(
            R,
            {
              defaultValue: i.alt,
              className: "!flex-1",
              onChange: (s) => S({ alt: s.target.value }),
              spellCheck: !!a["ui:spellcheck"]
            }
          )
        ] }),
        /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0" })
      ] }),
      !a["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(
            p,
            {
              defaultValue: i?.fit,
              size: "2",
              onValueChange: (s) => l({ fit: s }),
              children: [
                /* @__PURE__ */ e.jsx(h, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ e.jsx(u, { position: "popper", children: /* @__PURE__ */ e.jsx(g, { children: a.properties.fit.anyOf.map((s) => /* @__PURE__ */ e.jsx(j, { 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(
            p,
            {
              defaultValue: i.position,
              size: "2",
              onValueChange: (s) => l({ position: s }),
              children: [
                /* @__PURE__ */ e.jsx(h, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ e.jsx(u, { position: "popper", children: /* @__PURE__ */ e.jsx(g, { children: a.properties.position.anyOf.map((s) => /* @__PURE__ */ e.jsx(j, { value: s.const, children: s.title }, s.const)) }) })
              ]
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ e.jsx(
      D,
      {
        open: N,
        onClose: () => {
          t(!1);
        },
        onChoose: (s) => {
          l({ src: s }), t(!1);
        }
      }
    )
  ] });
};
export {
  ae as default
};
//# sourceMappingURL=image.js.map
