import { j as e } from "../../../../../_virtual/jsx-runtime.js";
import { useState as a } from "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { useEditor as $ } from "../../../../../use-editor.js";
import { PiMagnifyingGlass as T } from "../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/pi/index.js";
import { tx as k, css as I } from "../../../../style-system/dist/twind.js";
import { Root as L, Content as M, Title as P, Description as B } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/dialog.js";
import { Root as D, Slot as E } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as _, Trigger as z, Content as G, Item as l } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
import { Button as g } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as x, Text as f } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
function Z({ onChoose: j, onClose: y, open: v }) {
  const w = $(), [m, c] = a(null), [t, u] = a(null), [d, N] = a(1), [C, b] = a(""), [h, q] = a("all"), [p, i] = a(!1), R = async (s) => {
    s.preventDefault(), i(!0);
    const o = new FormData(s.currentTarget);
    if (c(null), o.get("query")) {
      b(o.get("query"));
      const r = await (await fetch(`/api/v1/search-images?query=${o.get("query")}&orientation=${h}`)).json();
      if (i(!1), r.error)
        return c(r.error);
      u(r);
    }
  };
  async function S() {
    const s = d + 1;
    N(s), i(!0);
    const o = await fetch(
      `/api/v1/search-images?query=${C}&orientation=${h}&page=${s}`
    );
    i(!1);
    const n = await o.json();
    if (n.error)
      return c(n.error);
    u((r) => r ? {
      ...r,
      results: [...r?.results ?? [], ...n.results]
    } : (console.log("No results"), null));
  }
  return /* @__PURE__ */ e.jsx(
    L,
    {
      open: v,
      onOpenChange: (s) => {
        s || y();
      },
      children: /* @__PURE__ */ e.jsxs(M, { maxWidth: "60dvw", className: "overflow-y-clip", children: [
        /* @__PURE__ */ e.jsx(P, { children: "Search images" }),
        /* @__PURE__ */ e.jsx(B, { size: "2", mb: "4", children: "Search images with Unsplash!" }),
        /* @__PURE__ */ e.jsxs("form", { className: "flex items-center gap-x-2", onSubmit: R, children: [
          /* @__PURE__ */ e.jsx(
            D,
            {
              placeholder: "Search images…",
              minLength: 3,
              required: !0,
              name: "query",
              className: "basis-1/2",
              children: /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(T, { height: "16", width: "16" }) })
            }
          ),
          /* @__PURE__ */ e.jsxs(_, { name: "orientation", defaultValue: "all", onValueChange: q, children: [
            /* @__PURE__ */ e.jsx(z, {}),
            /* @__PURE__ */ e.jsxs(G, { children: [
              /* @__PURE__ */ e.jsx(l, { value: "all", children: "All orientations" }),
              /* @__PURE__ */ e.jsx(l, { value: "landscape", children: "Landscape" }),
              /* @__PURE__ */ e.jsx(l, { value: "portrait", children: "Portrait" }),
              /* @__PURE__ */ e.jsx(l, { value: "squarish", children: "Squarish" })
            ] })
          ] }),
          /* @__PURE__ */ e.jsx(g, { variant: "solid", type: "submit", className: "invalid:opacity-50", loading: p, children: "Search images" })
        ] }),
        t !== null && t.results.length === 0 && /* @__PURE__ */ e.jsx(x, { color: "gray", className: "my-3", children: /* @__PURE__ */ e.jsx(f, { children: "No results found" }) }),
        m && /* @__PURE__ */ e.jsx(x, { color: "red", className: "mt-3", children: /* @__PURE__ */ e.jsx(f, { children: m }) }),
        /* @__PURE__ */ e.jsx(
          "div",
          {
            className: k(
              "py-2 mt-3 px-2 transition-all duration-300",
              I({
                columnCount: 5,
                columnGap: "1rem"
              })
            ),
            children: t?.results.map((s) => /* @__PURE__ */ e.jsxs(
              "div",
              {
                style: {
                  display: "grid",
                  breakInside: "avoid",
                  gridTemplateRows: "1fr auto",
                  margin: "0",
                  marginBottom: "1rem"
                },
                children: [
                  /* @__PURE__ */ e.jsx(
                    "img",
                    {
                      src: s.urls.small,
                      alt: s.alt_description,
                      className: `rounded-sm
                hover:scale-105 shadow-sm transition hover:shadow-2xl cursor-pointer`,
                      style: {
                        gridRow: "1 / -1",
                        gridColumn: "1"
                      },
                      onClick: () => {
                        console.log("Image results", s.urls), w.hideModal(), j?.(s.urls.full, s.urls.thumb);
                      }
                    }
                  ),
                  /* @__PURE__ */ e.jsxs(
                    "p",
                    {
                      className: "text-xs px-2 py-1 bg-black/60 text-white",
                      style: {
                        gridRow: "2",
                        gridColumn: "1 / -1"
                      },
                      children: [
                        "by ",
                        s.user.name
                      ]
                    }
                  )
                ]
              },
              s.id
            ))
          }
        ),
        t && d < t.total_pages && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center mt-3", children: /* @__PURE__ */ e.jsx(g, { loading: p, variant: "solid", size: "3", onClick: S, children: "Load more" }) })
      ] })
    }
  );
}
export {
  Z as default
};
//# sourceMappingURL=ModalSearchImage.js.map
