"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { usePostSearch } from '../../hooks/blog-hooks.mjs';
import { stripMarkdown, stripHtml } from '../../../utils.mjs';
import { HighlightText } from './highlight-text.mjs';
import { SearchModal } from './search-modal.mjs';
import { usePluginOverrides, useBasePath } from '@btst/stack/context';

const renderBlogResult = (item, index, query) => {
  const q = (query || "").toLowerCase();
  const excerptMatches = item.processedExcerpt ? item.processedExcerpt.toLowerCase().includes(q) : false;
  const contentMatches = item.processedContent ? item.processedContent.toLowerCase().includes(q) : false;
  return /* @__PURE__ */ jsxs(
    "button",
    {
      "data-testid": "search-result",
      type: "button",
      className: "flex w-full cursor-pointer flex-col gap-2 rounded-sm border-border border-b px-4 py-3 text-left transition-colors hover:bg-accent",
      onClick: () => item.onClick?.(),
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
          /* @__PURE__ */ jsx(
            HighlightText,
            {
              text: item.title,
              searchQuery: query,
              className: "flex-1 font-medium text-sm leading-5"
            }
          ),
          item.publishedAt && /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-muted-foreground text-xs", children: new Date(item.publishedAt).toLocaleDateString() })
        ] }),
        excerptMatches && /* @__PURE__ */ jsx(
          HighlightText,
          {
            text: item.processedExcerpt || "",
            searchQuery: query,
            className: "text-muted-foreground text-xs leading-4",
            maxLength: 120
          }
        ),
        contentMatches && /* @__PURE__ */ jsx(
          HighlightText,
          {
            text: item.processedContent,
            searchQuery: query,
            className: "text-muted-foreground text-xs leading-4",
            maxLength: 120
          }
        ),
        !excerptMatches && !contentMatches && /* @__PURE__ */ jsx(
          HighlightText,
          {
            text: item.processedExcerpt || item.processedContent,
            searchQuery: query,
            className: "text-muted-foreground text-xs leading-4",
            maxLength: 120
          }
        )
      ]
    },
    item.id
  );
};
function SearchInput({
  className,
  triggerClassName,
  placeholder,
  buttonText,
  emptyMessage
}) {
  const { navigate } = usePluginOverrides("blog");
  const basePath = useBasePath();
  const [currentQuery, setCurrentQuery] = React.useState("");
  const { data: searchResults = [], isLoading } = usePostSearch({
    query: currentQuery,
    enabled: currentQuery.trim().length > 0,
    debounceMs: 300,
    published: true
  });
  const formattedResults = React.useMemo(() => {
    return searchResults.map((post) => ({
      id: post.id,
      title: post.title,
      slug: post.slug,
      publishedAt: post.publishedAt,
      authorName: "",
      processedContent: stripMarkdown(stripHtml(post.content || "")),
      processedExcerpt: stripMarkdown(stripHtml(post.excerpt || "")),
      onClick: () => navigate(`${basePath}/blog/${post.slug}`)
    }));
  }, [searchResults, navigate, basePath]);
  const handleSearch = React.useCallback(
    (query) => {
      setCurrentQuery(query);
      return [];
    },
    []
  );
  return /* @__PURE__ */ jsx(
    SearchModal,
    {
      placeholder,
      buttonText,
      emptyMessage,
      searchFn: handleSearch,
      renderResult: renderBlogResult,
      results: formattedResults,
      isLoading,
      className,
      triggerClassName,
      keyboardShortcut: "\u2318K"
    }
  );
}

export { SearchInput, SearchInput as default };
