"use client";
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { BreakpointSelector as E } from "../shared/breakpoint-selector.js";
import { Label as C } from "../shared/label.js";
import { useAppSelector as G } from "../../hooks/use-app-selector.js";
import { useSettings as V } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as q } from "../../../../../store/selectors.js";
import { fileToBase64 as U, generateUniqueId as L, classNames as I } from "../../utils/index.js";
import { Root as H, Trigger as J, Portal as W, Overlay as X, Content as K, Title as Q, Close as Y } from "../../../../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.6_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0._hjv5xdlxm3zsqf3yg6gf36cppa/node_modules/@radix-ui/react-dialog/dist/index.js";
import { Root as Z, List as _, Trigger as P, Content as j } from "../../../../../node_modules/.pnpm/@radix-ui_react-tabs@1.1.3_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react@19.0.10_zw2jd7lnncg2lbtqb4feedrihy/node_modules/@radix-ui/react-tabs/dist/index.js";
import { useState as g, useCallback as R } from "react";
import { useDropzone as ee } from "../../../../../node_modules/.pnpm/react-dropzone@14.3.5_react@19.0.0/node_modules/react-dropzone/dist/es/index.js";
import { BsTrash as te, BsUpload as re } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { FiX as ae } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/fi/index.js";
import { HiPlusCircle as le } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { Button as oe } from "../shared/button.js";
const Ce = ({
  label: N,
  responsive: h,
  type: B,
  fieldName: c,
  mode: d,
  className: D,
  multiple: se,
  helpText: ne,
  accept: $ = {
    "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"]
  },
  maxSize: s = 5 * 1024 * 1024,
  // 5MB
  maxFiles: F = 1
}) => {
  const w = G(q), [r, m] = V(
    h && d ? `${c}.${w}.${d}` : h ? `${c}.${w}` : d ? `${c}.${d}` : c,
    B
  ), [k, x] = g(!1), [p, v] = g(""), [b, u] = g(!1), [f, o] = g(null), T = (a) => {
    v(a.target.value), o(null);
  }, M = async () => {
    if (!p) {
      o("Please enter a URL");
      return;
    }
    try {
      u(!0), o(null);
      const l = await (await fetch(p)).blob();
      if (l.size > s) {
        o(`File size exceeds the limit of ${s / 1024 / 1024}MB.`);
        return;
      }
      const n = await U(l), i = {
        id: L(),
        url: p,
        source: "url",
        base64Data: n,
        size: l.size,
        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
      };
      m(i), x(!1), v("");
    } catch (a) {
      o("Failed to load image from URL. Please check the URL and try again."), console.error("Error loading image from URL:", a);
    } finally {
      u(!1);
    }
  }, z = R(
    async (a) => {
      try {
        if (u(!0), o(null), a.length === 0)
          return;
        const l = a[0], n = await U(l), i = {
          id: L(),
          url: URL.createObjectURL(l),
          source: "local",
          base64Data: n,
          name: l.name,
          size: l.size,
          updatedAt: (/* @__PURE__ */ new Date()).toISOString()
        };
        m(i), x(!1);
      } catch (l) {
        o("Failed to process the image. Please try again."), console.error("Error processing image:", l);
      } finally {
        u(!1);
      }
    },
    [m]
  ), O = R(
    (a) => {
      var i;
      if (a.length === 0) return;
      const n = (i = a[0].errors[0]) == null ? void 0 : i.code;
      o(n === "file-too-large" ? `File size exceeds the limit of ${s / 1024 / 1024}MB.` : n === "file-invalid-type" ? "File type not supported. Please upload a valid image file." : "File upload failed. Please try again with a different file.");
    },
    [s]
  ), { getRootProps: S, getInputProps: A, isDragActive: y } = ee({
    onDrop: z,
    onDropRejected: O,
    accept: $,
    maxSize: s,
    maxFiles: F
  });
  return /* @__PURE__ */ t("div", { className: I("mt-4 grid w-full gap-1.5", D), children: [
    N && /* @__PURE__ */ t(C, { className: "flex flex-1 items-center gap-1", children: [
      N,
      " ",
      h && /* @__PURE__ */ e(E, {})
    ] }),
    /* @__PURE__ */ t(H, { open: k, onOpenChange: x, children: [
      /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "group relative h-32 w-full cursor-pointer overflow-hidden bg-slate-300 transition duration-200 hover:bg-slate-400", children: [
        (r == null ? void 0 : r.url) && /* @__PURE__ */ e(
          "img",
          {
            src: r.url,
            alt: (r == null ? void 0 : r.altText) ?? "",
            className: "h-full w-full object-contain"
          }
        ),
        !(r != null && r.url) && /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-2xl text-white", children: /* @__PURE__ */ e(le, {}) }),
        /* @__PURE__ */ t("div", { className: "absolute bottom-[-100%] flex w-full justify-between bg-slate-700 p-1 text-center text-xs text-slate-50 transition-all duration-200 group-hover:bottom-0", children: [
          /* @__PURE__ */ e("span", { children: "Choose Image" }),
          (r == null ? void 0 : r.url) && /* @__PURE__ */ e(
            "button",
            {
              onClick: (a) => {
                a.stopPropagation(), m(void 0);
              },
              className: "p-0.5",
              children: /* @__PURE__ */ e(te, { className: "hover:text-danger-500" })
            }
          )
        ] })
      ] }) }),
      /* @__PURE__ */ t(W, { children: [
        /* @__PURE__ */ e(X, { className: "data-[state=open]:animate-overlay-show fixed inset-0 z-50 bg-[rgba(0,0,0,0.7)]" }),
        /* @__PURE__ */ t(K, { className: "data-[state=open]:animate-content-show fixed left-[50%] top-[50%] z-[60] max-h-[600px] w-[500px] translate-x-[-50%] translate-y-[-50%] overflow-auto rounded-[6px] bg-white focus:outline-none", children: [
          /* @__PURE__ */ t(Q, { className: "flex justify-between border-b p-4", children: [
            /* @__PURE__ */ e("p", { className: "text-base font-semibold", children: "Upload Image" }),
            /* @__PURE__ */ e(Y, { className: "cursor-pointer", children: /* @__PURE__ */ e(ae, {}) })
          ] }),
          /* @__PURE__ */ t(Z, { defaultValue: "url", className: "flex flex-col", children: [
            /* @__PURE__ */ t(_, { className: "flex border-b", children: [
              /* @__PURE__ */ e(
                P,
                {
                  value: "url",
                  className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-slate-500 data-[state=active]:font-semibold",
                  children: "From URL"
                }
              ),
              /* @__PURE__ */ e(
                P,
                {
                  value: "local",
                  className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-slate-500 data-[state=active]:font-semibold",
                  children: "From Device"
                }
              )
            ] }),
            /* @__PURE__ */ t(j, { value: "url", className: "flex flex-col gap-4 p-4", children: [
              /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
                /* @__PURE__ */ e(C, { htmlFor: "image-url", children: "Image URL" }),
                /* @__PURE__ */ e(
                  "input",
                  {
                    id: "image-url",
                    type: "url",
                    value: p,
                    onChange: T,
                    placeholder: "https://example.com/image.jpg",
                    className: "w-full rounded px-3 py-2 text-sm ring-1 placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-slate-600"
                  }
                )
              ] }),
              f && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: f }),
              /* @__PURE__ */ e(oe, { onClick: M, disabled: b, className: "w-full", children: b ? "Loading..." : "Upload Image" })
            ] }),
            /* @__PURE__ */ t(j, { value: "local", className: "flex flex-col gap-4 p-4", children: [
              /* @__PURE__ */ t(
                "div",
                {
                  ...S(),
                  className: I(
                    "cursor-pointer rounded border-2 border-dashed p-8 text-center transition-colors",
                    y ? "border-slate-600 bg-slate-50" : "border-slate-300 hover:border-slate-600"
                  ),
                  children: [
                    /* @__PURE__ */ e("input", { ...A() }),
                    /* @__PURE__ */ e(re, { className: "mx-auto mb-2 text-3xl text-slate-400" }),
                    /* @__PURE__ */ e("p", { className: "text-sm text-slate-600", children: y ? "Drop the image here" : "Drag and drop an image here, or click to select" }),
                    /* @__PURE__ */ t("p", { className: "mt-2 text-xs text-slate-400", children: [
                      "Supported formats: JPG, PNG, GIF, WEBP (Max size: ",
                      s / 1024 / 1024,
                      "MB)"
                    ] })
                  ]
                }
              ),
              f && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: f }),
              b && /* @__PURE__ */ e("p", { className: "text-center", children: "Loading..." })
            ] })
          ] })
        ] })
      ] })
    ] })
  ] });
};
export {
  Ce as MediaControl
};
//# sourceMappingURL=media.control.js.map
