import { j as e } from "./jsx-runtime-Sp0orL4X.js";
import { useState as p, useEffect as D } from "react";
import { isEmpty as d, startCase as E } from "lodash-es";
import { MixerHorizontalIcon as L } from "@radix-ui/react-icons";
import { createApi as V } from "unsplash-js";
import { N as B, P as F, r as K, s as U, V as O, B as Q } from "./context-menu-zu6r7B6f.js";
import { S as P, c as S, b as C, d as I, f as h } from "./select-1WwjQDp6.js";
import "react-i18next";
import { d as H } from "./index-T7WZImL0.js";
import { useDebouncedState as R } from "@react-hookz/web";
import { Loader as $ } from "lucide-react";
import "@radix-ui/react-switch";
import "@radix-ui/react-accordion";
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 "@radix-ui/react-select";
import "jotai";
import "./iconBase-zweRWSz0.js";
import "@chaibuilder/runtime";
import "./plugin-sJ3Hzvpv.js";
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 k = async (x, g) => new Promise((o, a) => {
  V({ accessKey: g }).search.getPhotos(x).then((i) => {
    o(i);
  }).catch((i) => a(i));
}), Ze = ({ isModalView: x, onSelect: g }) => {
  const o = H("unsplashAccessKey", ""), [a, j] = p([]), [i, v] = p(0), [l, A] = p(), [n, q] = p(), [z, y] = p(0), [u, T] = R("", 1e3), [f, m] = p(!1), _ = async (s) => {
    if (d(u))
      return;
    let r = i + 1;
    s && (s.preventDefault(), r = 1), m(!0), v(r);
    const c = { query: u, page: r };
    l && (c.orientation = l), n && (c.color = n), k(c, o).then((t) => {
      var N, b, w;
      j(r === 1 ? ((N = t == null ? void 0 : t.response) == null ? void 0 : N.results) || [] : [...a, ...((b = t == null ? void 0 : t.response) == null ? void 0 : b.results) || []]), y((w = t == null ? void 0 : t.response) == null ? void 0 : w.total_pages), m(!1);
    }).catch(() => {
      m(!1);
    });
  };
  return D(() => {
    if (!d(u) && o) {
      m(!0);
      const s = { query: u, page: 1 };
      l && (s.orientation = l), n && (s.color = n), v(1), k(s, o).then((r) => {
        var c, t;
        j(((c = r == null ? void 0 : r.response) == null ? void 0 : c.results) || []), y((t = r == null ? void 0 : r.response) == null ? void 0 : t.total_pages), m(!1);
      }).catch(() => {
        m(!1);
      });
    }
  }, [l, n, u, o]), d(o) ? /* @__PURE__ */ e.jsx("div", { className: "h-full flex flex-col items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "max-w-3xl text-center text-gray-500", children: [
    "To enable Unsplash, kindly provide your",
    /* @__PURE__ */ e.jsx(
      "a",
      {
        href: "https://unsplash.com/documentation#public-authentication",
        className: "underline px-1 hover:text-blue-400",
        target: "_blank",
        rel: "noopener noreferrer",
        children: "Unsplash Access Key"
      }
    )
  ] }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
    /* @__PURE__ */ e.jsxs("form", { className: "flex items-center rounded-md border bg-gray-100 p-px", children: [
      /* @__PURE__ */ e.jsx(
        B,
        {
          type: "text",
          name: "query",
          className: "input",
          placeholder: 'Try "dog" or "apple"',
          onChange: (s) => T(s.target.value)
        }
      ),
      /* @__PURE__ */ e.jsxs(F, { children: [
        /* @__PURE__ */ e.jsx(K, { asChild: !0, className: "h-full w-10 cursor-pointer p-2.5 hover:bg-slate-200", children: /* @__PURE__ */ e.jsx(L, {}) }),
        /* @__PURE__ */ e.jsx(
          U,
          {
            side: x ? "bottom" : "right",
            className: "z-[9999] flex w-max items-center justify-center",
            children: /* @__PURE__ */ e.jsxs("div", { children: [
              /* @__PURE__ */ e.jsx("div", { className: "py-1 text-sm font-medium", children: "Orientation" }),
              /* @__PURE__ */ e.jsxs(P, { defaultValue: l, onValueChange: (s) => A(s), children: [
                /* @__PURE__ */ e.jsx(S, { className: "h-auto w-40 p-1 px-3", children: /* @__PURE__ */ e.jsx(C, { placeholder: "Select" }) }),
                /* @__PURE__ */ e.jsxs(I, { className: "z-[9999]", children: [
                  /* @__PURE__ */ e.jsx(h, { value: "", children: "All" }),
                  /* @__PURE__ */ e.jsx(h, { value: "landscape", children: "Landscape" }),
                  /* @__PURE__ */ e.jsx(h, { value: "portrait", children: "Portrait" }),
                  /* @__PURE__ */ e.jsx(h, { value: "squarish", children: "Square" })
                ] })
              ] }),
              /* @__PURE__ */ e.jsx("div", { className: "pb-1 pt-2 text-sm font-medium", children: "Color" }),
              /* @__PURE__ */ e.jsxs(P, { defaultValue: n, onValueChange: (s) => q(s), children: [
                /* @__PURE__ */ e.jsx(S, { className: "h-auto w-40 p-1 px-3", children: /* @__PURE__ */ e.jsx(C, { placeholder: "Select" }) }),
                /* @__PURE__ */ e.jsxs(I, { className: "z-[9999]", children: [
                  /* @__PURE__ */ e.jsx(h, { value: "", children: "All" }),
                  [
                    "black_and_white",
                    "black",
                    "white",
                    "yellow",
                    "orange",
                    "red",
                    "purple",
                    "magenta",
                    "green",
                    "teal",
                    "blue"
                  ].map((s) => /* @__PURE__ */ e.jsx(h, { value: s, children: E(s) }, s))
                ] })
              ] })
            ] })
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ e.jsxs(
      O,
      {
        className: `h-full ${x && !d(a) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
        children: [
          d(a) && !f && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
            /* @__PURE__ */ e.jsx("div", { className: "font-medium", children: "No Data" }),
            /* @__PURE__ */ e.jsx("div", { className: "text-sm text-gray-500", children: "Enter query and press enter" })
          ] }),
          x ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: a.map((s) => /* @__PURE__ */ e.jsx(
            "div",
            {
              role: "button",
              tabIndex: 0,
              className: "my-1 flex",
              onClick: () => g(s.urls.regular),
              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: s.alt_description,
                  src: s.urls.small
                }
              ) })
            },
            s.id
          )) }) : a.map((s) => (
            // TODO: Drag and Drop Image to Canvas from Here use `pic.urls.[small, regular, full]` for image quality
            /* @__PURE__ */ e.jsx("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
              "img",
              {
                className: "h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",
                alt: s.alt_description,
                src: s.urls.small
              }
            ) }) }, s.id)
          )),
          f && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center py-8", children: [
            /* @__PURE__ */ e.jsx($, { className: "animate-spin w-6 h-6" }),
            "  Loading..."
          ] }),
          !d(a) && i < z && !f && /* @__PURE__ */ e.jsx(
            Q,
            {
              size: "sm",
              variant: "link",
              className: "w-full",
              onClick: () => _(void 0),
              disabled: f,
              children: f ? "" : "Load More"
            }
          )
        ]
      }
    )
  ] });
};
export {
  Ze as default,
  k as fetchImage
};
