import Suggestion from "../../../renderer/components/suggestion";
import { useStore } from "../../../renderer/stores/global-stores";
import React, { useEffect, useState } from "react";
import Suggestions from "../../../renderer/containers/suggestions";
import SuggestionPreview from "../../../renderer/containers/SuggestionPreview";

export default function SearchMdn() {
  // const [query, setQuery]= useState<string | null>(null);
  const [omsInputValue, setSuggestionPreview] = useStore(
    (states) => [
      states.omsInputValue,
      states.setSuggestionPreview,
    ]
  );
  const [searchRes, setSearchRes] = useState<Result[]>();
  useEffect(() => {
    (async () => {
      if (!omsInputValue) {
        setSearchRes([]);
        setSuggestionPreview(null);
        return;
      }
      const results = await searchMDN(omsInputValue);
      setSearchRes(results);
    })();
  }, [omsInputValue]);

  return ( <Suggestions>
      {searchRes?.map((r) => (
        <Suggestion
          suggestion={{
            id: "url-" + r.id,
            title: r.title,
            subTitle:
              r.summary.substring(0, 50) +
              (r.summary?.length > 50 ? "..." : ""),
            desc: r.summary,
            url: `${r.url}`,
            type: "url",
          }}
          preview={
            <SuggestionPreview>
              <div>{r?.title}</div>
              <div className="h300">Summary</div>
              <p
                className="h100"
                dangerouslySetInnerHTML={{
                  __html: r?.summary || "",
                }}
              ></p>
            </SuggestionPreview>
          }
        />
      ))}
    </Suggestions>
  );
}

interface MDNResponse {
  documents: Array<{
    title: string;
    mdn_url: string;
    summary: string;
  }>;
}

interface Result {
  id: string;
  title: string;
  url: string;
  summary: string;
}

async function searchMDN(query: string): Promise<Result[]> {
  try {
    const qsp = new URLSearchParams({
      q: query,
      sort: "best",
    }).toString();
    const response: MDNResponse = await fetch(
      `https://developer.mozilla.org/api/v1/search/en-US?${qsp}`
    ).then((data) => data.json());
    return response.documents.map((doc) => ({
      id: doc.mdn_url,
      title: doc.title,
      summary: doc.summary,
      url: `https://developer.mozilla.org/${doc.mdn_url}`,
    }));
  } catch (error) {
    console.error("[search-mdn-result-view]", error);
    return Promise.resolve([]);
  }
}