import { j as e } from "./jsx-runtime-Sp0orL4X.js";
import { useState as l, useEffect as k } from "react";
import { isEmpty as j, map as b } from "lodash-es";
import { atom as F, useAtom as U } from "jotai";
import { V as C } from "./context-menu-zu6r7B6f.js";
import { useTranslation as E } from "react-i18next";
import { d as y } from "./index-T7WZImL0.js";
import { Upload as G, Loader as P } from "lucide-react";
import "@radix-ui/react-switch";
import "@radix-ui/react-accordion";
import "@radix-ui/react-icons";
import "@radix-ui/react-alert-dialog";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "@radix-ui/react-label";
import "@radix-ui/react-scroll-area";
import "@radix-ui/react-tabs";
import "@radix-ui/react-tooltip";
import "@radix-ui/react-popover";
import "@radix-ui/react-hover-card";
import "@radix-ui/react-dropdown-menu";
import "@radix-ui/react-separator";
import "@radix-ui/react-toast";
import "cmdk";
import "@radix-ui/react-dialog";
import "@radix-ui/react-context-menu";
import "clsx";
import "tailwind-merge";
import "./iconBase-zweRWSz0.js";
import "@chaibuilder/runtime";
import "./plugin-sJ3Hzvpv.js";
import "@react-hookz/web";
import "tree-model";
import "react-quill";
import "./STRINGS-rPGH65PW.js";
import "react-hotkeys-hook";
import "@floating-ui/dom";
import "@floating-ui/react-dom";
import "flagged";
import "@tailwindcss/typography";
import "@tailwindcss/forms";
import "@tailwindcss/aspect-ratio";
import "tailwindcss-palette-generator";
import "react-wrap-balancer";
import "react-dom";
import "prop-types";
import "re-resizable";
import "@rjsf/validator-ajv8";
import "@rjsf/core";
import "react-arborist";
import "himalaya";
import "react-icons-picker";
import "react-autosuggest";
import "fuse.js";
import "i18next";
import "lodash";
import "framer-motion";
const S = F([]), Le = ({ isModalView: o, onSelect: m }) => {
  const { t: r } = E(), c = y("uploadMediaCallback"), n = y("fetchMediaCallback"), [a, d] = U(S), [N, u] = l(!1), [x, f] = l(!1), [, v] = l(), [h, p] = l("");
  k(() => {
    (async () => {
      if (!n)
        return;
      f(!0);
      const t = await n();
      d(t || []), f(!1);
    })();
  }, []);
  const w = (t) => {
    var s, i;
    if (p(""), t && ((i = (s = t == null ? void 0 : t.target) == null ? void 0 : s.files) == null ? void 0 : i.length) > 0) {
      const g = t.target.files[0];
      g.type.startsWith("image") ? I(g) : p(r("Please select an image"));
    }
  }, I = async (t) => {
    if (c) {
      u(!0);
      try {
        const { url: s } = await c(t);
        m(s), v(void 0);
        const i = await n();
        d(i);
      } catch (s) {
        d([]), p((s == null ? void 0 : s.message) || "Something went wrong.");
      }
      u(!1);
    }
  };
  return /* @__PURE__ */ e.jsxs("div", { children: [
    /* @__PURE__ */ e.jsxs("label", { htmlFor: o ? "upload-in-modal" : "upload-in-panel", children: [
      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center rounded-lg", children: /* @__PURE__ */ e.jsxs(
        "label",
        {
          htmlFor: "image-upload",
          className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100",
          children: [
            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center pb-6 pt-5", children: [
              /* @__PURE__ */ e.jsx(G, { className: "mb-3 h-10 w-10 text-gray-400" }),
              /* @__PURE__ */ e.jsx("p", { className: "mb-2 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ e.jsx("span", { className: "font-semibold", children: r("Click to upload") }) }),
              /* @__PURE__ */ e.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: r("SVG, PNG, JPG or GIF (Max. 2mb)") })
            ] }),
            N ? /* @__PURE__ */ e.jsxs("div", { className: "flex h-full w-full items-center justify-center", children: [
              /* @__PURE__ */ e.jsx(P, { className: "h-6 w-6 animate-spin" }),
              /* @__PURE__ */ e.jsx("span", { className: "ml-2 text-sm text-gray-500", children: r("Uploading...") })
            ] }) : null,
            h && /* @__PURE__ */ e.jsx("p", { className: "pb-2 text-xs text-red-500", children: h || r("Something went wrong") })
          ]
        }
      ) }),
      /* @__PURE__ */ e.jsx(
        "input",
        {
          type: "file",
          id: "image-upload",
          accept: "image/*",
          hidden: !0,
          onChange: w
        }
      )
    ] }),
    /* @__PURE__ */ e.jsxs(C, { className: `-mx-2 flex h-full flex-col pb-8 pt-2 ${o ? "px-2" : ""} pt-2`, children: [
      j(a) && x && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e.jsx("div", { className: "animate-pulse font-medium", children: r("Fetching...") }) }),
      j(a) && !x && /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
        /* @__PURE__ */ e.jsx("div", { className: "mb-4 h-12 rounded-full p-6" }),
        /* @__PURE__ */ e.jsx("h3", { className: "mb-2 text-sm font-semibold", children: r("No images found") }),
        /* @__PURE__ */ e.jsx("p", { className: "mb-4 max-w-sm text-muted-foreground", children: r("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.") })
      ] }),
      o ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: b(a, (t) => /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "my-1 flex", onClick: () => m(t.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
        "img",
        {
          className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
          alt: t.name,
          src: t.thumbUrl
        }
      ) }) }, t.id)) }) : b(a, (t) => (
        // TODO: Drag and Drop Image to Canvas from Here use `pic.url` for image quality
        /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "px-2 py-1", onClick: () => m(t.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
          "img",
          {
            className: "h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",
            alt: t.name,
            src: t.url
          }
        ) }) }, t.id)
      ))
    ] })
  ] });
};
export {
  Le as default
};
