import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import { nanoid } from "../../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { useState, useMemo } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import ModalSearchImage from "../../ModalSearchImage.js";
import { fieldLabel } from "../form-class.js";
import { debounce } from "lodash-es";
import { IoMdClose } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io/index.js";
import { FieldTitle } from "../field-factory.js";
import { useUploader } from "../../UploaderContext.js";
import { useDynamicTextEditor } from "../../../hooks/use-editable-text.js";
import { usePageQueries } from "../../../../../../../use-page-data.js";
import { a as c } 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 o } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as u } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as C, Trigger as u$1, Content as g, Group as y, Item as v } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const ImageField = (props) => {
  const { schema, formData, onChange, title, description, currentValue, brickId, noDynamic } = props;
  const [showSearch, setShowSearch] = useState(false);
  const id = useMemo(() => nanoid(), []);
  const { onImageUpload } = useUploader();
  const pageQueries = usePageQueries();
  const onDynamicSrcChange = (newSrc) => {
    onPropsChange({ src: newSrc });
  };
  const DynamicTextEditor = useDynamicTextEditor({
    ...props,
    currentValue: currentValue?.src,
    onChange: onDynamicSrcChange
  });
  const onPropsChange = (newVal) => {
    onChange({ ...currentValue ?? {}, ...newVal });
  };
  const debouncedOnPropsChange = debounce(onPropsChange, 300);
  if (pageQueries.length > 0 && !noDynamic && !schema["ui:no-dynamic"]) {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "field field-string basis-full flex flex-col gap-1 max-w-full", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title, description }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "field field-string flex items-start gap-1.5 max-w-full", children: DynamicTextEditor })
    ] });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "file-field flex items-center gap-1 flex-1", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title, description }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 flex-1", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "input",
          {
            id,
            type: "file",
            className: "overflow-hidden w-[0.1px] h-[0.1px] opacity-0 absolute -z-10",
            accept: schema["ui:accept"],
            onChange: async (e) => {
              const file = e.target.files?.[0];
              if (file) {
                const url = await onImageUpload(file);
                onPropsChange({ src: url });
              }
            }
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1", children: " " }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          o,
          {
            variant: "soft",
            size: "1",
            radius: "full",
            type: "button",
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
              "label",
              {
                className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]",
                htmlFor: id,
                children: "Upload image"
              }
            )
          }
        ),
        schema["ui:show-img-search"] && /* @__PURE__ */ jsxRuntimeExports.jsx(o, { variant: "soft", size: "1", radius: "full", type: "button", onClick: () => setShowSearch(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]", children: "Search" }) })
      ] })
    ] }),
    currentValue?.src && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-full w-0" }),
      /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx("img", { src: currentValue.src, alt: "Preview", className: "w-full h-auto max-h-[100px] object-cover" }),
        /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(IoMdClose, { className: "w-4 h-4 ", onClick: () => onPropsChange({ src: "" }) }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-full w-0" }),
      !schema["ui:no-alt-text"] && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between gap-12 flex-1 items-center mt-3", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: fieldLabel, children: "Alt text" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            u,
            {
              defaultValue: currentValue.alt,
              className: "!flex-1",
              onChange: (e) => debouncedOnPropsChange({ alt: e.target.value }),
              spellCheck: !!schema["ui:spellcheck"]
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-full w-0" })
      ] }),
      !schema["ui:no-object-options"] && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-12 flex-1 mt-3 pr-1.5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1 flex-1 pl-1", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: fieldLabel, children: "Fit" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(
            C,
            {
              defaultValue: currentValue?.fit,
              size: "2",
              onValueChange: (value) => onPropsChange({ fit: value }),
              children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ jsxRuntimeExports.jsx(g, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: c(schema.properties.fit).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: item.const, children: item.title }, item.const)) }) })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: fieldLabel, children: "Position" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(
            C,
            {
              defaultValue: currentValue.position,
              size: "2",
              onValueChange: (value) => onPropsChange({ position: value }),
              children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                /* @__PURE__ */ jsxRuntimeExports.jsx(g, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: c(schema.properties.position).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: item.const, children: item.title }, item.const)) }) })
              ]
            }
          )
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      ModalSearchImage,
      {
        open: showSearch,
        onClose: () => {
          setShowSearch(false);
        },
        onChoose: (url) => {
          onPropsChange({ src: url });
          setShowSearch(false);
        }
      }
    )
  ] });
};
export {
  ImageField as default
};
//# sourceMappingURL=image.js.map
