import { useEffect, useEffectEvent, useState } from 'react'
import '../App.css'
import { getTrackingEntries, loadFoodItems, loadNutritionalKinds, trackFood } from '../api';

function Homepage() {
  const [foodItems, setFoodItems] = useState([]);
  useEffect(() => {
    let ignore = false;

    loadFoodItems().then((resp) => {
        setFoodItems(resp);
    })

    return () => {
      ignore = true;
    };
  }, []);

  const [nutritionKinds, setNutritionKinds] = useState([]);
  useEffect(() => {
    let ignore = false;

    loadNutritionalKinds().then((kinds) => {
      setNutritionKinds(kinds);
    })

    return () => {
      ignore = true;
    };
  }, []);

  const [trackingEntries, setTrackingEntries] = useState([]);
  useEffect(() => {
    getTrackingEntries().then((entries) => {
      console.log(entries);
      setTrackingEntries(entries);
    });

    return () => {};
  }, []);

  const submitFoodTracking = (formData: FormData) => {
    console.log("Track food");

    const food_id = Number(formData.get("food"));
    const quantity = Number(formData.get("quantity"));
    const timestamp = Math.floor(Date.now() / 1000);
    
    console.log("Track food", food_id, quantity, timestamp);

    trackFood(food_id, quantity, timestamp).then(() => {
      console.log("Tracked food")
    });
  };

  return (
    <>
      <h1>CalFlow</h1>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>

      <form action={submitFoodTracking}>
        <select name="food">
          {
            foodItems.map((entry) => {
              return <option value={entry.id} key={entry.id}>{entry.name}</option>
            })
          }
        </select>
        <input name="quantity" type="number" placeholder="Quantity" />
        <button type="submit">Track Now</button>
      </form>

      <ul>
        {
          trackingEntries.map((entry) => {
            const date = new Date(entry.timestamp * 1000);
            return <li key={entry.id}>[{date.toLocaleString()}] {entry.food_name} ({entry.quantity} {entry.unit_short})</li>
          })
        }
      </ul>
    </>
  )
}

export default Homepage