<ul className="meal-list">
  {userSelectedMeals.map((meal) => (
    <li key={meal.id} className="meal-item">
      <div className="meal-actions">
        <Button
          icon
          className="edit-button"
          onClick={() => incrementMealQuantity(meal)}
        >
          <Icon name="plus" />
        </Button>
        <Button
          icon
          className="edit-button"
          onClick={() => decrementMealQuantity(meal)}
        >
          <Icon name="minus" />
        </Button>
      </div>
      <div>
        <h3>{meal.mealQuantity || 1}</h3>{" "}
        {/* Display mealQuantity, if it exists. If not, show 1. */}
      </div>
      <div className="meal-details">
        <div>
          <h3>{meal.name}</h3>
          <p>{meal.description}</p>
        </div>
      </div>
      <div className="meal-actions">
        <Button icon className="edit-button" onClick={() => editMeal(meal)}>
          <Icon name="pencil" />
        </Button>
        <Button
          icon
          className="delete-button"
          onClick={() => handleDeleteMeal(meal.id)}
        >
          <Icon name="trash" />
        </Button>
      </div>
    </li>
  ))}
</ul>

<Modal>
  <Modal.Header>
    <div style={{ textAlign: "center" }}>
      <Header>Add Meal</Header>
    </div>
    <Label className="meal-details-label">Meal Name:</Label>
    <Input
      className="meal-details-input"
      value={mealName}
      onChange={(e) => setMealName(e.target.value)}
    />
    <Label className="meal-details-label">Meal Description:</Label>
    <Input
      className="meal-details-input"
      value={mealDescription}
      onChange={(e) => setMealDescription(e.target.value)}
    />
  </Modal.Header>
  <Modal.Content>
    <Modal.Description>
      <Header>Ingredients</Header>
      <List divided relaxed>
        {ingredients.map((ingredient, index) => (
          <IngredientItem
            key={index}
            ingredient={ingredient}
            onRemove={(ingredientToRemove) => {
              const updatedIngredients = ingredients.filter(
                (ing) => ing !== ingredientToRemove
              );
              setIngredients(updatedIngredients);
            }}
          />
        ))}
      </List>
      <div className="ingredient-adder">
        <Label className="ingredient-details-label">Ingredient Name:</Label>
        <Input
          placeholder="Enter ingredient name..."
          value={selectedIngredient}
          onChange={(e) => setSelectedIngredient(e.target.value)}
        />
        <Label className="ingredient-details-label">Quantity:</Label>
        <Input
          type="number"
          min="1"
          value={quantity}
          onChange={(e) => setQuantity(e.target.value)}
        />
        <Label className="ingredient-details-label">Quantity Unit:</Label>
        <Dropdown
          placeholder="Select unit..."
          fluid
          selection
          options={quantityUnitOptions.map((unit) => ({
            key: unit,
            text: unit,
            value: unit,
          }))}
          value={quantityUnit}
          onChange={(e, { value }) => setQuantityUnit(value)}
        />
        <div className="control-buttons">
          <Button color="green" onClick={addIngredient}>
            <Icon name="plus" /> Add Ingredient
          </Button>
          <Button color="teal" onClick={handleSaveMealClick}>
            <Icon name="check" /> Save meal to list
          </Button>
          {showErrorLabel && (
            <Label color="red" pointing="above" className="error-label">
              Please add a meal name, description and ingredients before saving.
            </Label>
          )}
          <Button color="red" onClick={onClose}>
            <Icon name="remove" /> Cancel
          </Button>
        </div>
      </div>
    </Modal.Description>
  </Modal.Content>
</Modal>

<div className="shopping-list-container">
  <h1>Shopping List</h1>
  <p>id: {shoppingList.shoppingListId}</p>
  <List divided relaxed className="shopping-list">
    {shoppingList.items.map((item, index) => (
      <ShoppingListItem
        key={index}
        item={item}
        onRemove={() => removeItem(item)}
        onToggle={() => toggleItem(item)}
        inactiveItems={inactiveItems}
      />
    ))}
  </List>
  {/* Render the inactiveItems list similarly */}
  <List divided relaxed className="shopping-list-inactive">
    {inactiveItems.items.map((item, index) => (
      <ShoppingListItem
        key={index}
        item={item}
        onRemove={() => removeItem(item)}
        onToggle={() => toggleItem(item)}
        inactiveItems={inactiveItems}
      />
    ))}
  </List>
  <NewListItem shoppingList={shoppingList} setShoppingList={setShoppingList} />
  <Button className="add-button shopping-button" onClick={toggleShowMealList}>
    Go back to Meals
  </Button>
</div>

useEffect(() => {
  // Fetch meals from API
  fetch('https://grocery.alexs-apis.xyz/meals/allmeals')
    .then((response) => response.json())
    .then((data) => setMeals(data))
    .catch((error) => console.error('Error fetching meals:', error));
}, [modalOpen]);

const generateShoppingList = async () => {
  console.log("Shopping List ID:", shoppingList.shoppingListId);
  console.log("List: ", shoppingList);
  if (userSelectedMeals.length > 0) {
    if (shoppingList.shoppingListId != null) {
      // Updating an existing list
      const requestBody = userSelectedMeals.flatMap((meal) =>
        meal.ingredients.map((ingredient) => ({
          ingredient: {
            ingredientId: ingredient.ingredientId,
            ingredientName: ingredient.ingredientName,
          },
          itemQuantity: ingredient.quantity * (meal.mealQuantity || 1), // multiply the ingredient amount by how many entries of that meal there are, or 1, if no copies
          itemQuantityUnit: ingredient.quantityUnit,
        }))
      );

      console.log("Updating shopping list with: ", requestBody);

      try {
        const response = await fetch(
          `https://grocery.alexs-apis.xyz/lists/update/${shoppingList.shoppingListId}`,
          {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(requestBody),
          }
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const responseData = await response.json();
        console.log("Shopping list updated:", responseData);

        // Update shopping list in the master container
        setShoppingList(responseData);

        toggleShowMealList();
      } catch (error) {
        console.error("Error updating shopping list:", error);
      }
    } else {
      // Creating a new list
      let requestBody = userSelectedMeals.flatMap((meal) =>
        meal.ingredients.map((ingredient) => ({
          ingredient: {
            ingredientId: ingredient.ingredientId,
            ingredientName: ingredient.ingredientName,
          },
          itemQuantity: ingredient.quantity * (meal.mealQuantity || 1), // multiply the ingredient amount by how many entries of that meal there are, or 1, if no copies
          itemQuantityUnit: ingredient.quantityUnit,
        }))
      );

      console.log("Creating shopping list with: ", requestBody);

      try {
        const response = await fetch(
          "https://grocery.alexs-apis.xyz/lists/create",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(requestBody),
          }
        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const responseData = await response.json();
        console.log("Shopping list created:", responseData);

        // Update shopping list in the master container
        setShoppingList(responseData);

        toggleShowMealList();
      } catch (error) {
        console.error("Error creating shopping list:", error);
      }
    }
  } else {
    // If saving a meal without the required fields filled
    setShowErrorLabel(true); // Show the error label
    setTimeout(() => {
      setShowErrorLabel(false); // Hide the error label after 2.5 seconds
    }, 2500);
    console.error("Add meals before trying to generate a list");
  }
};