import type { FC } from "hono/jsx";

export const Message: FC<{ url: string }> = (props) => {
  const url = new URL(props.url);
  const msg = url.searchParams.get("msg");
  const error = url.searchParams.get("error");
  if (error) return <p class="message error">{error}</p>;
  else if (msg) return <p class="message">{msg}</p>;
  else return null;
};

export const AddRecipe: FC = () => {
  return (
    <form method="post" action="/add-recipe">
      <h2>Ajouter une recette</h2>
      <label>
        <input
          type="text"
          name="recipeId"
          placeholder="URL ou ID de la recette Cookidoo"
        />
        <button type="submit">Ajouter</button>
      </label>
    </form>
  );
};

export const RecipesList: FC<{ recipes: Recipe[] }> = (props) => {
  return (
    <form method="post" action="/add-grocery-list">
      <h2>Liste des recettes</h2>
      <ul>
        {props.recipes.map((recipe) => (
          <li>
            <input type="checkbox" name={`${recipe.id}`} />
            <a href={recipe.url} target="_blank">
              {recipe.name}
            </a>
          </li>
        ))}
      </ul>
      <button type="submit">Créer une liste de course</button>
    </form>
  );
};

export const GroceryList: FC<{
  recipes: Recipe[];
  ingredients: GroceryItem[];
}> = (props) => {
  return (
    <div>
      <h2>Recettes:</h2>
      <ul>
        {props.recipes.map((recipe) => (
          <li>{recipe.name}</li>
        ))}
      </ul>
      <h2>Liste des ingrédients:</h2>
      <ul>
        {props.ingredients.map(({ name, quantity, unit }) => (
          <li>
            <input type="checkbox" />
            <strong>{name}</strong>: {quantity} {unit}
          </li>
        ))}
      </ul>
    </div>
  );
};