import { j as e } from "../../../../../../../_virtual/jsx-runtime.js";
import { nanoid as z } from "../../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js";
import { useState as k, useMemo as I } 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 S from "../../ModalSearchImage.js";
import U from "./color.js";
import { useUploader as P } from "../../UploaderContext.js";
import { IoSearch as V, IoCloseOutline as F } from "../../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io5/index.js";
import { HelpIcon as m } from "../HelpIcon.js";
import { fieldLabel as d } from "../form-class.js";
import { FieldTitle as R } from "../field-factory.js";
import { useIsPremiumPlan as L } from "../../../../../../../use-editor.js";
import { tx as O } from "../../../../../../style-system/dist/twind.js";
import { Button as p } 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 { Text 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/text.js";
import { Root as h, Trigger as x, Content as u, Group as f, Item as g } 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";
import { IconButton as T } 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/icon-button.js";
const ie = (n) => {
  const { schema: t, formData: M, onChange: i, title: j, description: v, currentValue: a = {} } = n, [b, l] = k(!1), r = I(() => z(), []), { onImageUpload: N } = P(), w = (s) => i({ ...a, ...s }), C = L();
  return /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-1 relative", children: [
    /* @__PURE__ */ e.jsxs("div", { className: O("background-field flex items-center justify-between flex-wrap gap-1 flex-1"), children: [
      /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ e.jsx(R, { title: j ?? "Color / image", description: v }) }),
      /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end gap-1.5", children: [
        /* @__PURE__ */ e.jsx(
          U,
          {
            ...n,
            currentValue: a.color,
            title: void 0,
            onChange: (s) => {
              i({ ...a, color: s });
            },
            hideColorLabel: !0
          }
        ),
        /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
          /* @__PURE__ */ e.jsx(
            "input",
            {
              id: r,
              type: "file",
              className: "overflow-hidden w-[0.1px] h-[0.1px] opacity-0 absolute -z-10",
              accept: t["ui:accept"] ?? "image/png, image/jpeg, image/jpg, image/svg+xml, image/webp, image/gif",
              onChange: async (s) => {
                const o = s.target.files?.[0];
                if (!o) return;
                const y = await N(o);
                console.log("image upload url", y);
                const c = URL.createObjectURL(o);
                c && i({ ...a, image: c });
              }
            }
          ),
          /* @__PURE__ */ e.jsx(p, { 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: r,
              children: a.image ? "Upload new" : "Upload image"
            }
          ) }),
          t["ui:show-img-search"] && /* @__PURE__ */ e.jsx(p, { variant: "soft", size: "1", radius: "full", type: "button", onClick: () => l(!0), children: /* @__PURE__ */ e.jsx("label", { className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]", children: /* @__PURE__ */ e.jsx(V, { className: "text-upstart-700 w-4 h-4" }) }) })
        ] })
      ] })
    ] }),
    t["ui:premium"] && !C && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-gray-500/50 rounded-md flex items-center justify-center", children: /* @__PURE__ */ e.jsx(B, { size: "1", className: "text-white", children: "Premium feature" }) }),
    a.image && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
      /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 gap-1", children: [
          /* @__PURE__ */ e.jsx("label", { className: d, children: "Size" }),
          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e.jsxs(
              h,
              {
                defaultValue: a.size,
                size: "2",
                onValueChange: (s) => i({ ...a, size: s }),
                children: [
                  /* @__PURE__ */ e.jsx(x, { radius: "large", variant: "ghost", placeholder: "Not specified" }),
                  /* @__PURE__ */ e.jsx(u, { position: "popper", children: /* @__PURE__ */ e.jsx(f, { children: t.properties.size.anyOf.map((s) => /* @__PURE__ */ e.jsx(g, { value: s.const, children: s.title }, s.const)) }) })
                ]
              }
            ),
            /* @__PURE__ */ e.jsx(
              m,
              {
                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__ */ e.jsxs("div", { className: "flex flex-col flex-1 gap-0.5", children: [
          /* @__PURE__ */ e.jsx("label", { className: d, children: "Repeat" }),
          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e.jsxs(
              h,
              {
                defaultValue: a.repeat ?? "no-repeat",
                size: "2",
                onValueChange: (s) => i({ ...a, repeat: s }),
                children: [
                  /* @__PURE__ */ e.jsx(x, { radius: "large", variant: "ghost" }),
                  /* @__PURE__ */ e.jsx(u, { position: "popper", children: /* @__PURE__ */ e.jsx(f, { children: t.properties.repeat.anyOf.map((s) => /* @__PURE__ */ e.jsx(g, { value: s.const, children: s.title }, s.const)) }) })
                ]
              }
            ),
            /* @__PURE__ */ e.jsx(m, { help: "Choose how the background image will be repeated." })
          ] })
        ] })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "basis-full w-0 h-2" }),
      /* @__PURE__ */ e.jsxs("div", { className: "border border-upstart-200 p-1.5 self-end relative", children: [
        /* @__PURE__ */ e.jsx("img", { src: a.image, alt: r, className: "max-w-full h-auto" }),
        /* @__PURE__ */ e.jsx(
          T,
          {
            onClick: (s) => {
              s.stopPropagation(), i({ ...a, image: void 0 });
            },
            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__ */ e.jsx(F, {})
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ e.jsx(
      S,
      {
        open: b,
        onClose: () => {
          l(!1);
        },
        onChoose: (s) => {
          w({ image: s }), l(!1);
        }
      }
    )
  ] });
};
export {
  ie as default
};
//# sourceMappingURL=background.js.map
