"use client";
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { BreakpointSelector as z } from "../shared/breakpoint-selector.js";
import { Label as C } from "../shared/label.js";
import { useAppSelector as A } 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 H, generateUniqueId as P, classNames as U } from "../../../../../utils.js";
import { Root as J, Trigger as S, 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 L, 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 u, useCallback as B } 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 oe } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { Button as le } from "../shared/button.js";
const we = ({
  label: y,
  responsive: h,
  type: I,
  fieldName: i,
  mode: c,
  className: $,
  accept: F = {
    "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"]
  },
  maxSize: l = 5 * 1024 * 1024,
  // 5MB
  maxFiles: R = 1
}) => {
  const N = A(q), [r, d] = V(
    h && c ? `${i}.${N}.${c}` : h ? `${i}.${N}` : c ? `${i}.${c}` : i,
    I
  ), [k, x] = u(!1), [m, w] = u(""), [b, p] = u(!1), [g, o] = u(null), D = (a) => {
    w(a.target.value), o(null);
  }, M = async () => {
    if (!m) {
      o("Please enter a URL");
      return;
    }
    try {
      if (p(!0), o(null), (await (await fetch(m)).blob()).size > l) {
        o(`File size exceeds the limit of ${l / 1024 / 1024}MB.`);
        return;
      }
      const n = {
        id: P(),
        url: m
        // base64Data,
      };
      d(n), x(!1), w("");
    } 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 {
      p(!1);
    }
  }, T = B(
    async (a) => {
      try {
        if (p(!0), o(null), a.length === 0)
          return;
        const s = a[0], n = await H(s), f = {
          id: P(),
          // url: URL.createObjectURL(file),
          url: n,
          // Use base64 data as URL
          // base64Data,
          name: s.name
        };
        d(f), x(!1);
      } catch (s) {
        o("Failed to process the image. Please try again."), console.error("Error processing image:", s);
      } finally {
        p(!1);
      }
    },
    [d]
  ), E = B(
    (a) => {
      var f;
      if (a.length === 0) return;
      const n = (f = a[0].errors[0]) == null ? void 0 : f.code;
      o(n === "file-too-large" ? `File size exceeds the limit of ${l / 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.");
    },
    [l]
  ), { getRootProps: G, getInputProps: O, isDragActive: v } = ee({
    onDrop: T,
    onDropRejected: E,
    accept: F,
    maxSize: l,
    maxFiles: R
  });
  return /* @__PURE__ */ t("div", { className: U("mt-4 grid w-full gap-1.5", $), children: [
    y && /* @__PURE__ */ t(C, { className: "flex flex-1 items-center gap-1", children: [
      y,
      " ",
      h && /* @__PURE__ */ e(z, {})
    ] }),
    /* @__PURE__ */ t(J, { open: k, onOpenChange: x, children: [
      /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "group relative h-32 w-full cursor-pointer overflow-hidden bg-gray-300 transition duration-200 hover:bg-gray-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(oe, {}) }),
        /* @__PURE__ */ t("div", { className: "absolute bottom-[-100%] flex w-full justify-between bg-gray-700 p-1 text-center text-xs text-gray-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(), d(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(
                L,
                {
                  value: "url",
                  className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-gray-500 data-[state=active]:font-semibold",
                  children: "From URL"
                }
              ),
              /* @__PURE__ */ e(
                L,
                {
                  value: "local",
                  className: "border-b-2 border-transparent px-4 py-2 text-sm font-medium data-[state=active]:border-gray-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: m,
                    onChange: D,
                    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-gray-600"
                  }
                )
              ] }),
              g && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: g }),
              /* @__PURE__ */ e(le, { 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",
                {
                  ...G(),
                  className: U(
                    "cursor-pointer rounded border-2 border-dashed p-8 text-center transition-colors",
                    v ? "border-gray-600 bg-gray-50" : "border-gray-300 hover:border-gray-600"
                  ),
                  children: [
                    /* @__PURE__ */ e("input", { ...O() }),
                    /* @__PURE__ */ e(re, { className: "mx-auto mb-2 text-3xl text-gray-400" }),
                    /* @__PURE__ */ e("p", { className: "text-sm text-gray-600", children: v ? "Drop the image here" : "Drag and drop an image here, or click to select" }),
                    /* @__PURE__ */ t("p", { className: "mt-2 text-xs text-gray-400", children: [
                      "Supported formats: JPG, PNG, GIF, WEBP (Max size: ",
                      l / 1024 / 1024,
                      "MB)"
                    ] })
                  ]
                }
              ),
              g && /* @__PURE__ */ e("p", { className: "text-danger-500 text-sm", children: g }),
              b && /* @__PURE__ */ e("p", { className: "text-center", children: "Loading..." })
            ] })
          ] })
        ] })
      ] })
    ] })
  ] });
};
export {
  we as MediaControl
};
//# sourceMappingURL=media.control.js.map
