import Suggestion from "../../../renderer/components/suggestion";
import SuggestionPreview from "../../../renderer/containers/SuggestionPreview";
import Suggestions from "../../../renderer/containers/suggestions";
import db, { SnippetModel, SnippetTable } from "../../../renderer/utils/idb";
import React, { useEffect, useState } from "react";
import { useFuse } from "../../../renderer/utils/use-fuzzy-search";
import { useStore } from "../../../renderer/stores/global-stores";

export default function SearchSnippetView() {
  const [snippets, setSnippets] = useState<SnippetModel[]>([]);
  const { hits, query, updateQuery } = useFuse<SnippetModel>(snippets, {
    matchAllOnEmptyQuery: true,
    keys: ['title', 'snippet']
  });
  const [omsInputValue] = useStore((states) => [states.omsInputValue]);
  useEffect(() => {
    updateQuery(omsInputValue);
  }, [omsInputValue]);
  useEffect(() => {
    (async () => {
      const snippetsFromDb = await (
        await db
      ).getAllFromIndex(SnippetTable, "by-createdAt");
      setSnippets(snippetsFromDb);
    })();
  }, []);
  return (
    <Suggestions>
      {hits?.map((hit) => {
        const snippet = hit.item;
        return (
          <Suggestion
            suggestion={{
              id: "snippet-" + snippet.id,
              title: snippet.title,
              subTitle:
                snippet.snippet.substring(0, 50) +
                (snippet.snippet?.length > 50 ? "..." : ""),
              desc: snippet.snippet,
              type: "no-op",
            }}
            preview={
              <SuggestionPreview>
                <div>{snippet?.title}</div>
                <div className="h300">Summary</div>
                <p
                  className="h100"
                  dangerouslySetInnerHTML={{
                    __html: snippet.snippet || "",
                  }}
                ></p>
              </SuggestionPreview>
            }
          />
        );
      })}
    </Suggestions>
  );
}