import { useState, useEffect } from "react";

// Interface for the response from the server
// This should eventually reside in a dedicated file
interface CountResponse {
  pressCount: number;
}

// Some constants for the button
const BUTTON_ENDPOINT = "/api/button";

// A simple button that counts how many times it's been pressed
export function CountButton(): JSX.Element {
  const [count, setCount] = useState<number>(NaN);

  // useEffect with a [] dependency array runs only once
  useEffect(() => {
    async function getCount(): Promise<void> {
      const response = await fetch(BUTTON_ENDPOINT);
      const data = (await response.json()) as CountResponse;
      setCount(data.pressCount);
    }
    void getCount();
  }, []);

  // This is what runs on every button click
  function press(): void {
    async function pressPost(): Promise<void> {
      const response = await fetch(BUTTON_ENDPOINT, { method: "POST" });
      const data = (await response.json()) as CountResponse;
      setCount(data.pressCount);
    }
    void pressPost();
  }

  // Return some JSX with the button and associated handler
  return <button onClick={press}>count is {count}</button>;
}