import { useState, useEffect } from "react";
import GraphComponent from "./components/GraphComponent";
import CategoryFilter from "./components/CategoryFilter";
import ResetButton from "./components/ResetButton";
import { startRecording, stopRecording } from "./utils/js/screenRecorder";

export default function App() {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    // Function to handle key press for starting/stopping recording
    const handleKeyPress = (event) => {
      if (event.key === 'r') {
        if (isRecording) {
          stopRecording(); // Stop the recording
        } else {
          startRecording(); // Start the recording
        }
      setIsRecording(!isRecording); // Toggle recording state
      }
    };

    // Add event listener for keydown event
    document.addEventListener('keydown', handleKeyPress);

    // Cleanup the event listener on unmount
    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, [isRecording]); // Re-run effect when isRecording changes

  return (
    <div className="w-screen h-screen flex flex-col bg-gray-900 text-white relative overflow-hidden">

      {/*UI top*/}
      <div className="absolute top-0 left-0 right-0 z-10">
        {/* Title */}
        <h1 className="text-4xl font-bold text-center mt-6 uppercase">Antenna Archive 𐂷</h1>

        {/* Category Filter Bar */}
        <div className="flex justify-center space-x-4 mt-4">
          <CategoryFilter selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
          <ResetButton selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
        </div>
      </div>

      {/* Graph */}
      <div className="flex-grow">
        <GraphComponent selectedCategory={selectedCategory} />
      </div>
    </div>
  );
}
