import { j as e } from "./jsx-runtime-Sp0orL4X.js";
import { useState as c, useEffect as S } from "react";
import { isEmpty as d } from "lodash-es";
import { createApi as B } from "unsplash-js";
import { N as D, V as E, B as L } from "./context-menu-9cWJcKdh.js";
import { useTranslation as T } from "react-i18next";
import { e as V, C as k } from "./index-ry3B_D93.js";
import { useDebouncedState as F } from "@react-hookz/web";
import { Loader as K } from "lucide-react";
import "@radix-ui/react-switch";
import "@radix-ui/react-accordion";
import "@radix-ui/react-icons";
import "class-variance-authority";
import "@radix-ui/react-alert-dialog";
import "@radix-ui/react-slot";
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-select";
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 "jotai";
import "./iconBase-zweRWSz0.js";
import "@chaibuilder/runtime";
import "./plugin-sJ3Hzvpv.js";
import "tree-model";
import "react-quill";
import "./STRINGS-TDN5UhWi.js";
import "flagged";
import "react-hotkeys-hook";
import "@floating-ui/dom";
import "@floating-ui/react-dom";
import "react-event-hook";
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 "react-error-boundary";
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 "framer-motion";
const C = async (f, g) => new Promise((s, r) => {
  B({ accessKey: g }).search.getPhotos(f).then((i) => {
    s(i);
  }).catch((i) => r(i));
}), $e = ({ isModalView: f, onSelect: g }) => {
  const s = V("unsplashAccessKey", ""), [r, x] = c([]), [i, v] = c(0), [l, P] = c(), [n, A] = c(), [_, b] = c(0), [h, q] = F("", 1e3), [u, m] = c(!1), { t: j } = T(), I = async (a) => {
    if (d(h))
      return;
    let t = i + 1;
    a && (a.preventDefault(), t = 1), m(!0), v(t);
    const p = { query: h, page: t };
    l && (p.orientation = l), n && (p.color = n), C(p, s).then((o) => {
      var y, N, w;
      x(t === 1 ? ((y = o == null ? void 0 : o.response) == null ? void 0 : y.results) || [] : [...r, ...((N = o == null ? void 0 : o.response) == null ? void 0 : N.results) || []]), b((w = o == null ? void 0 : o.response) == null ? void 0 : w.total_pages), m(!1);
    }).catch(() => {
      m(!1);
    });
  };
  return S(() => {
    if (!d(h) && s) {
      m(!0);
      const a = { query: h, page: 1 };
      l && (a.orientation = l), n && (a.color = n), v(1), C(a, s).then((t) => {
        var p, o;
        x(((p = t == null ? void 0 : t.response) == null ? void 0 : p.results) || []), b((o = t == null ? void 0 : t.response) == null ? void 0 : o.total_pages), m(!1);
      }).catch(() => {
        m(!1);
      });
    }
  }, [l, n, h, s]), d(s) ? /* @__PURE__ */ e.jsx("div", { className: "flex h-full 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: "px-1 underline 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 gap-x-2 rounded-md border border-border bg-background p-px", children: [
      /* @__PURE__ */ e.jsx(
        D,
        {
          type: "text",
          name: "query",
          className: "text-foreground",
          placeholder: 'Try "dog" or "apple"',
          onChange: (a) => q(a.target.value)
        }
      ),
      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
        k,
        {
          className: "w-40",
          placeholder: j("Orientation"),
          options: [
            {
              value: "",
              label: "All"
            },
            {
              value: "landscape",
              label: "Landscape"
            },
            {
              value: "portrait",
              label: "Portrait"
            },
            {
              value: "squarish",
              label: "Square"
            }
          ],
          defaultValue: l,
          onValueChange: (a) => P(a)
        }
      ) }),
      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
        k,
        {
          placeholder: j("Color"),
          options: [
            {
              value: "",
              label: "All"
            },
            {
              value: "black_and_white",
              label: "Black and White"
            },
            {
              value: "black",
              label: "Black"
            },
            {
              value: "white",
              label: "White"
            },
            {
              value: "night",
              label: "Night"
            },
            {
              value: "warm",
              label: "Warm"
            },
            {
              value: "cool",
              label: "Cool"
            },
            {
              value: "sepia",
              label: "Sepia"
            }
          ],
          defaultValue: n,
          onValueChange: (a) => A(a)
        }
      ) })
    ] }),
    /* @__PURE__ */ e.jsxs(
      E,
      {
        className: `h-full ${f && !d(r) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
        children: [
          d(r) && !u && /* @__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" })
          ] }),
          f ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: r.map((a) => /* @__PURE__ */ e.jsx(
            "div",
            {
              role: "button",
              tabIndex: 0,
              className: "my-1 flex",
              onClick: () => g(a.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: a.alt_description,
                  src: a.urls.small
                }
              ) })
            },
            a.id
          )) }) : r.map((a) => (
            // 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: a.alt_description,
                src: a.urls.small
              }
            ) }) }, a.id)
          )),
          u && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center py-8", children: [
            /* @__PURE__ */ e.jsx(K, { className: "h-6 w-6 animate-spin" }),
            "  Loading..."
          ] }),
          !d(r) && i < _ && !u && /* @__PURE__ */ e.jsx(
            L,
            {
              size: "sm",
              variant: "link",
              className: "w-full",
              onClick: () => I(void 0),
              disabled: u,
              children: u ? "" : "Load More"
            }
          )
        ]
      }
    )
  ] });
};
export {
  $e as default,
  C as fetchImage
};
