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 I, useMemo as S } 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 U from "../../ModalSearchImage.js";
import { useUploader as P } from "../../UploaderContext.js";
import { IoSearch as R, IoCloseOutline as V } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.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 c } from "../form-class.js";
import { FieldTitle as B } from "../field-factory.js";
import { useIsPremiumPlan as F } from "../../../../../../../use-editor.js";
import { tx as L } from "../../../../../../style-system/dist/twind.js";
import { a as p } 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 d } 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 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/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 D } 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 oe = (j) => {
  const { schema: i, formData: M, onChange: t, title: b, description: v, currentValue: a } = j, [N, r] = I(!1), l = S(() => k(), []), { onImageUpload: w } = P(), C = (s) => t({ ...a ?? {}, ...s }), y = F();
  return /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-2.5 relative", children: [
    /* @__PURE__ */ e.jsxs("div", { className: L("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(B, { title: b ?? "Background image", description: v }) }),
      /* @__PURE__ */ e.jsx("div", { className: "flex justify-end gap-1.5", children: /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
        /* @__PURE__ */ e.jsx(
          "input",
          {
            id: l,
            type: "file",
            className: "overflow-hidden w-[0.1px] h-[0.1px] opacity-0 absolute -z-10",
            accept: i["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 z = await w(o);
              console.log("image upload url", z);
              const n = URL.createObjectURL(o);
              n && t({ ...a, image: n });
            }
          }
        ),
        /* @__PURE__ */ e.jsx(d, { 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: l,
            children: a?.image ? "Upload new" : "Upload image"
          }
        ) }),
        i["ui:show-img-search"] && /* @__PURE__ */ e.jsx(d, { variant: "soft", size: "1", radius: "full", type: "button", onClick: () => r(!0), children: /* @__PURE__ */ e.jsx("label", { className: "!leading-[inherit] !mb-0 !font-medium !text-inherit cursor-[inherit]", children: /* @__PURE__ */ e.jsx(R, { className: "text-upstart-700 w-4 h-4" }) }) })
      ] }) })
    ] }),
    i["ui:premium"] && !y && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-gray-500/50 rounded-md flex items-center justify-center", children: /* @__PURE__ */ e.jsx(T, { 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: c, children: "Size" }),
          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4", children: [
            /* @__PURE__ */ e.jsxs(
              h,
              {
                defaultValue: a.size,
                size: "2",
                onValueChange: (s) => t({ ...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: p(i.properties.size).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: c, 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) => t({ ...a, repeat: s }),
                children: [
                  /* @__PURE__ */ e.jsx(x, { radius: "large", variant: "ghost" }),
                  /* @__PURE__ */ e.jsx(u, { position: "popper", children: /* @__PURE__ */ e.jsx(f, { children: p(i.properties.repeat).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 h-0" }),
      /* @__PURE__ */ e.jsxs("div", { className: "border border-upstart-200 p-1.5 self-end relative", children: [
        /* @__PURE__ */ e.jsx("img", { src: a.image, alt: l, className: "max-w-full h-auto" }),
        /* @__PURE__ */ e.jsx(
          D,
          {
            onClick: (s) => {
              s.stopPropagation(), t(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__ */ e.jsx(V, {})
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ e.jsx(
      U,
      {
        open: N,
        onClose: () => {
          r(!1);
        },
        onChoose: (s) => {
          C({ image: s }), r(!1);
        }
      }
    )
  ] });
};
export {
  oe as default
};
//# sourceMappingURL=background.js.map
