// import { useEffect, useState, useRef } from "react";
// import { useDebouncedCallback } from "use-debounce";
// import { createEditorAiContext } from "../ai/editorAiContext";
// import { executePrompt } from "../services/aiService";
// import { executeSearch } from "../services/searchService";
// import { useEditContext } from "../client/editContext";
// import { Loader2 } from "lucide-react";
// import { Input } from "../../components/ui/input";
// import { Thumbnail } from "../services/contentService";
// import { Thumbnails } from "./Thumbnails";
// import { Preview } from "./Preview";
// import DialogButtons from "../ui/DialogButtons";
// import { Button } from "../../components/ui/button";
// import { Sparkles } from "lucide-react";
// import { toast } from "sonner";
export function AiImageSearch({ onMediaSelected, onHide, }) {
    // const [prompt, setPrompt] = useState("");
    // const [loadingPrompt, setLoadingPrompt] = useState(false);
    // const [loadingThumbnails, setLoadingThumbnails] = useState(false);
    // const [images, setImages] = useState<Thumbnail[]>([]);
    // const [selectedImage, setSelectedImage] = useState<Thumbnail>();
    // const editContext = useEditContext();
    // const currentSuggestionRequest = useRef<AbortController | null>(null);
    // const inputRef = useRef<HTMLInputElement>(null);
    // useEffect(() => {
    //   suggestPrompt();
    //   if (inputRef.current) {
    //     inputRef.current.focus();
    //   }
    // }, []);
    // const suggestPrompt = async () => {
    //   if (editContext) {
    //     setPrompt("");
    //     setLoadingPrompt(true);
    //     if (currentSuggestionRequest.current) {
    //       currentSuggestionRequest.current.abort();
    //     }
    //     const abortController = new AbortController();
    //     currentSuggestionRequest.current = abortController;
    //     try {
    //       const result = await executePrompt(
    //         [
    //           {
    //             content:
    //               "Please extract search terms from the field context that can be used to find a matching image. " +
    //               "I will use the search terms to find an image and populate the image field. If the component does not provide enough context, " +
    //               "also get content from the parent component using the get-page-content function. " +
    //               "Do not consider current image field contents. " +
    //               "Reply with search terms only!",
    //             name: "user",
    //             role: "user",
    //             id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
    //           },
    //         ],
    //         { editContext, createAiContext: createEditorAiContext },
    //         { allowedFunctions: ["get-page-content"], addContextContent: true },
    //         { signal: abortController.signal },
    //       );
    //       setLoadingPrompt(false);
    //       const lastMessage = result?.messages?.[result.messages.length - 1];
    //       const newPrompt = lastMessage?.content?.replaceAll("\n", "") || "";
    //       setPrompt(newPrompt);
    //     } catch (error) {
    //       if (error instanceof Error && error.name !== "AbortError") {
    //         console.error("Failed to fetch prompt:", error);
    //       }
    //       setLoadingPrompt(false);
    //     } finally {
    //       currentSuggestionRequest.current = null;
    //     }
    //   }
    // };
    // const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
    //   if (!editContext) return;
    //   setLoadingThumbnails(true);
    //   const result = await executeSearch({
    //     query: searchPrompt,
    //     editContext,
    //     maxResults: 50,
    //     index: "media",
    //     skipValidation: true,
    //   });
    //   if (result.type == "success") {
    //     setImages(result.data as Thumbnail[]);
    //   } else {
    //     toast.error(result.response.statusText || "Error searching");
    //   }
    //   setLoadingThumbnails(false);
    // }, 300);
    // const onPromptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //   const newPrompt = e.target.value;
    //   setPrompt(newPrompt);
    //   if (currentSuggestionRequest.current) {
    //     currentSuggestionRequest.current.abort();
    //   }
    // };
    // useEffect(() => {
    //   if (prompt) {
    //     handleSearch(prompt);
    //   }
    // }, [prompt]);
    // return (
    //   <>
    //     <Splitter className="flex-1 border-0">
    //       <SplitterPanel size={50} className="flex flex-col pt-4">
    //         <div className="flex flex-1 flex-col gap-2 px-2 pt-2 text-sm">
    //           <div>
    //             Search prompt
    //             <div className="flex items-center gap-2">
    //               <Input
    //                 ref={inputRef} // Add ref to InputText
    //                 value={prompt}
    //                 onChange={onPromptChange}
    //                 className="flex-1"
    //               />
    //               {loadingPrompt && (
    //                 <div className="flex h-10 items-center">
    //                   <Loader2 className="h-6 w-6 animate-spin" />
    //                 </div>
    //               )}
    //               {!loadingPrompt && (
    //                 <Button onClick={() => suggestPrompt()} size="sm">
    //                   <Sparkles className="mr-2 h-4 w-4" />
    //                   Suggest
    //                 </Button>
    //               )}
    //             </div>
    //           </div>
    //           <div className="relative flex-1">
    //             {loadingThumbnails && (
    //               <div className="flex h-full items-center">
    //                 <Loader2 className="h-6 w-6 animate-spin" />
    //               </div>
    //             )}
    //             <Thumbnails
    //               images={images}
    //               selectedImage={selectedImage}
    //               setSelectedImage={setSelectedImage}
    //               onMediaSelected={onMediaSelected}
    //               onHide={onHide}
    //             />
    //           </div>
    //         </div>
    //       </SplitterPanel>
    //       <SplitterPanel size={50} className="relative">
    //         <Preview selectedImage={selectedImage} />
    //       </SplitterPanel>
    //     </Splitter>
    //     <DialogButtons>
    //       <Button
    //         disabled={!selectedImage}
    //         onClick={() => {
    //           onMediaSelected(selectedImage!.id);
    //           onHide();
    //         }}
    //       >
    //         Select
    //       </Button>
    //       <Button onClick={() => onHide()}>Cancel</Button>
    //     </DialogButtons>
    //   </>
    // );
}
//# sourceMappingURL=AiImageSearch.js.map