import "./App.css";
// https://socket.dev/npm/package/react-hook-speech-to-text
import useSpeechToText from "react-hook-speech-to-text";
import micIcon from "./assets/1608550_microphone_icon.png";
import useFetch from "./hooks/useFetch";
import ProductListItem from "./components/productListItem";
import { useEffect, useState } from "react";

import Graph from 'node-dijkstra';
 
const route = new Graph()
 
route.addNode('A', { B:1 })
route.addNode('B', { A:1, C:2, D: 4 })
route.addNode('C', { B:2, D:1 })
route.addNode('D', { C:1, B:4 })
 

function App() {
  const {
    error,
    interimResult,
    isRecording,
    results,
    setResults,
    startSpeechToText,
    stopSpeechToText,
  } = useSpeechToText({
    continuous: true,
    useLegacyResults: false,
  });

  const {
    get,
    loading,
    error: responseError,
    response,
  } = useFetch(`${import.meta.env.VITE_API_ENDPOINT}/todos`);

  const [currentProductId, setCurrentProductId] = useState<null | number>(null);
  console.log(route.path('A', 'D')); // => [ 'A', 'B', 'C', 'D' ]

  useEffect(() => {
    if (results.length > 0) {
      (async () => {
        await get();
      })();
    }
  }, [results]);

  // display: flex;
  // flex-direction: column;
  // align-items: center;

  if (error) return <p>Web Speech API is not available in this browser 🤷‍</p>;
  console.log("response: ", response);
  console.log("responseError: ", responseError);

  const text = results.length > 0 && results[results.length - 1].transcript;

  return (
    <>
      <div>
        <h3>Please, tell us what are you looking for?</h3>

        <span>Click and hold to speak!</span>
      </div>
      <div className={`mt-5 flex flex-col items-center`}>
        <div
          onMouseDown={() => {
            startSpeechToText();
          }}
          onMouseUp={stopSpeechToText}
          className={`w-16 border border-solid rounded-full cursor-pointer p-2.5  ${
            isRecording && "speaking"
          }`}
        >
          <img src={micIcon}></img>
        </div>
        {isRecording && <span className="text-sm">Listening...</span>}
        <ul className="mt-5 italic">
          {text && `Showing results for: ${text}`}
          {/* {results.map(result => {
            return (
              <li key={result.timestamp}>{`Looking for: "${result.transcript}"`}</li>
            )
          })} */}
          {/* {interimResult && <li>{interimResult}</li>} */}
        </ul>

        {loading && `Hold on a bit please!`}

        {!loading && !responseError && response && response.length > 0 && (
          <div id="findings-section">
            {response.map((content) => {
              return (
                <ProductListItem
                  expandCallback={(pid: number) => setCurrentProductId(pid)}
                  current={currentProductId}
                  category={content.category}
                  price={content.price}
                  rating={content.rating}
                  id={content.id}
                  title={content.title}
                  description={content.description}
                  imgLink={content.image}
                ></ProductListItem>
              );
            })}
          </div>
        )}
      </div>
    </>
  );
}

export default App;
