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 { useUploader } from "../../UploaderContext.js";
import { IoSearch, IoCloseOutline } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io5/index.js";
import { HelpIcon } from "../HelpIcon.js";
import { fieldLabel } from "../form-class.js";
import { FieldTitle } from "../field-factory.js";
import { useIsPremiumPlan } from "../../../../../../../use-editor.js";
import { tx as D } from "../../../../../../style-system/dist/twind.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 { Text as p } 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.js";
import { Root as C, Trigger as u, 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";
import { IconButton as o$1 } 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/icon-button.js";
const BackgroundField = (props) => {
  const { schema, formData, onChange, title, description, currentValue } = props;
  const [showSearch, setShowSearch] = useState(false);
  const id = useMemo(() => nanoid(), []);
  const { onImageUpload } = useUploader();
  const onPropsChange = (newVal) => onChange({ ...currentValue ?? {}, ...newVal });
  const isPremium = useIsPremiumPlan();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-2.5 relative", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("background-field flex items-center justify-between flex-wrap gap-1 flex-1"), children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title: title ?? "Background image", description }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end gap-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1 items-center", 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"] ?? "image/png, image/jpeg, image/jpg, image/svg+xml, image/webp, image/gif",
            onChange: async (e) => {
              const file = e.target.files?.[0];
              if (!file) return;
              const url = await onImageUpload(file);
              console.log("image upload url", url);
              const tempUrl = URL.createObjectURL(file);
              if (tempUrl) {
                onChange({ ...currentValue, image: tempUrl });
              }
            }
          }
        ),
        /* @__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: currentValue?.image ? "Upload new" : "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("label", { className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoSearch, { className: "text-upstart-700 w-4 h-4" }) }) })
      ] }) })
    ] }),
    schema["ui:premium"] && !isPremium && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-gray-500/50 rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(p, { size: "1", className: "text-white", children: "Premium feature" }) }),
    currentValue?.image && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-1 gap-1", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: fieldLabel, children: "Size" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              C,
              {
                defaultValue: currentValue.size,
                size: "2",
                onValueChange: (value) => onChange({ ...currentValue, size: value }),
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(u, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(g, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: c(schema.properties.size).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: item.const, children: item.title }, item.const)) }) })
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsx(
              HelpIcon,
              {
                help: `
              When "Auto", the background image will be displayed in its original size.
              "Cover" will make the background image cover the entire element,
              and "Contain" will make the background image contained within the element.
              `
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-1 gap-0.5", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: fieldLabel, children: "Repeat" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              C,
              {
                defaultValue: currentValue.repeat ?? "no-repeat",
                size: "2",
                onValueChange: (value) => onChange({ ...currentValue, repeat: value }),
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(u, { radius: "large", variant: "ghost" }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(g, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: c(schema.properties.repeat).map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: item.const, children: item.title }, item.const)) }) })
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, { help: "Choose how the background image will be repeated." })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "basis-full h-0" }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-upstart-200 p-1.5 self-end relative", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: currentValue.image, alt: id, className: "max-w-full h-auto" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          o$1,
          {
            onClick: (e) => {
              e.stopPropagation();
              onChange(null);
            },
            title: "Close",
            size: "1",
            variant: "surface",
            color: "gray",
            className: "!absolute !top-1 !right-1 !text-upstart-700 hover:(!bg-red-700 !text-white)",
            children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoCloseOutline, {})
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      ModalSearchImage,
      {
        open: showSearch,
        onClose: () => {
          setShowSearch(false);
        },
        onChoose: (url) => {
          onPropsChange({ image: url });
          setShowSearch(false);
        }
      }
    )
  ] });
};
export {
  BackgroundField as default
};
//# sourceMappingURL=background.js.map
