import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useState } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { useEditor } from "../../../../../use-editor.js";
import { PiMagnifyingGlass } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/pi/index.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { Root as s, Content as p, Title as g, Description as m } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/dialog.js";
import { Root as u, Slot as c } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as C, Trigger as u$1, Content as g$1, Item as v } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
import { Button as o } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as n, Text as u$2 } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/callout.js";
function ModalSearchImage({ onChoose, onClose, open }) {
  const editor = useEditor();
  const [error, setError] = useState(null);
  const [searchResults, setSearchResults] = useState(null);
  const [page, setPage] = useState(1);
  const [query, setQuery] = useState("");
  const [orientation, setOrientation] = useState("all");
  const [loading, setLoading] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const data = new FormData(e.currentTarget);
    setError(null);
    if (data.get("query")) {
      setQuery(data.get("query"));
      const res = await fetch(`/api/v1/search-images?query=${data.get("query")}&orientation=${orientation}`);
      const json = await res.json();
      setLoading(false);
      if (json.error) {
        return setError(json.error);
      }
      setSearchResults(json);
    }
  };
  async function loadMore() {
    const nextPage = page + 1;
    setPage(nextPage);
    setLoading(true);
    const res = await fetch(
      `/api/v1/search-images?query=${query}&orientation=${orientation}&page=${nextPage}`
    );
    setLoading(false);
    const json = await res.json();
    if (json.error) {
      return setError(json.error);
    }
    setSearchResults((existing) => {
      if (!existing) {
        console.log("No results");
        return null;
      }
      return {
        ...existing,
        results: [...existing?.results ?? [], ...json.results]
      };
    });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    s,
    {
      open,
      onOpenChange: (open2) => {
        if (!open2) {
          onClose();
        }
      },
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(p, { maxWidth: "60dvw", className: "overflow-y-clip", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(g, { children: "Search images" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(m, { size: "2", mb: "4", children: "Search images with Unsplash!" }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: "flex items-center gap-x-2", onSubmit: submit, children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            u,
            {
              placeholder: "Search images…",
              minLength: 3,
              required: true,
              name: "query",
              className: "basis-1/2",
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(c, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(PiMagnifyingGlass, { height: "16", width: "16" }) })
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(C, { name: "orientation", defaultValue: "all", onValueChange: setOrientation, children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, {}),
            /* @__PURE__ */ jsxRuntimeExports.jsxs(g$1, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "all", children: "All orientations" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "landscape", children: "Landscape" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "portrait", children: "Portrait" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "squarish", children: "Squarish" })
            ] })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(o, { variant: "solid", type: "submit", className: "invalid:opacity-50", loading, children: "Search images" })
        ] }),
        searchResults !== null && searchResults.results.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { color: "gray", className: "my-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u$2, { children: "No results found" }) }),
        error && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { color: "red", className: "mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u$2, { children: error }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "py-2 mt-3 px-2 transition-all duration-300",
              E({
                columnCount: 5,
                columnGap: "1rem"
              })
            ),
            children: searchResults?.results.map((result) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "div",
              {
                style: {
                  display: "grid",
                  breakInside: "avoid",
                  gridTemplateRows: "1fr auto",
                  margin: "0",
                  marginBottom: "1rem"
                },
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(
                    "img",
                    {
                      src: result.urls.small,
                      alt: result.alt_description,
                      className: "rounded-sm\n                hover:scale-105 shadow-sm transition hover:shadow-2xl cursor-pointer",
                      style: {
                        gridRow: "1 / -1",
                        gridColumn: "1"
                      },
                      onClick: () => {
                        console.log("Image results", result.urls);
                        editor.hideModal();
                        onChoose?.(result.urls.full, result.urls.thumb);
                      }
                    }
                  ),
                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
                    "p",
                    {
                      className: "text-xs px-2 py-1 bg-black/60 text-white",
                      style: {
                        gridRow: "2",
                        gridColumn: "1 / -1"
                      },
                      children: [
                        "by ",
                        result.user.name
                      ]
                    }
                  )
                ]
              },
              result.id
            ))
          }
        ),
        searchResults && page < searchResults.total_pages && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center mt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(o, { loading, variant: "solid", size: "3", onClick: loadMore, children: "Load more" }) })
      ] })
    }
  );
}
export {
  ModalSearchImage as default
};
//# sourceMappingURL=ModalSearchImage.js.map
