<app-default-layout>
  <app-go-back></app-go-back>

  <div class="wrapper">
    <h1 class="h3">{{ mealTime }}</h1>

    <div class="meal-container">
      <div class="meals">
        <div class="meals-list">
          <app-food-card
            *ngFor="let food of mealFoods"
            [food]="food.card"
            (onEdit)="editFood(food.card)"
            (onRemove)="this.foodToRemove = food.card"
          ></app-food-card>

          <app-food-card
            *ngFor="let recipe of mealRecipes"
            [food]="recipe.card"
            (onEdit)="editFood(recipe.card)"
            (onRemove)="this.foodToRemove = recipe.card"
          ></app-food-card>
        </div>

        <div class="meals-options desktop-only">
          <app-button (onClick)="toggleAddFoodModal('food')">
            Adicionar alimento ({{ mealFoods.length }}/{{ maxFoods }})
          </app-button>

          <app-button (onClick)="toggleAddFoodModal('recipe')">
            Adicionar receita ({{ mealRecipes.length }}/{{ maxRecipes }})
          </app-button>
        </div>
      </div>

      <app-nutrition-table
        [ingredients]="ingredients"
        [maxResults]="8"
        [canShowAll]="false"
      ></app-nutrition-table>

      <div class="meals-options responsive-only">
        <app-button (onClick)="toggleAddFoodModal('food')">
          Adicionar alimento ({{ mealFoods.length }}/{{ maxFoods }})
        </app-button>

        <app-button (onClick)="toggleAddFoodModal('recipe')">
          Adicionar receita ({{ mealRecipes.length }}/{{ maxRecipes }})
        </app-button>
      </div>
    </div>
  </div>

  <app-add-food
    [(isVisible)]="isModalAddFoodOpen"
    [searchType]="searchType"
    (onAddFood)="addFood($event)"
  ></app-add-food>

  <app-add-food
    [isVisible]="!!foodToEdit"
    [searchType]="foodToEdit?.type === 'recipe' ? 'recipe' : 'food'"
    [addedFood]="foodToEdit"
    (addedFoodChange)="
      foodToEdit?.type === 'recipe' ? updateRecipe($event) : updateFood($event)
    "
    (isVisibleChange)="!$event && (foodToEdit = null)"
  ></app-add-food>

  <app-confirm-modal
    [isVisible]="!!this.foodToRemove"
    title="Deseja remover este registro?"
    description="Ao confirmar, o registro desse alimento será apagado e não poderá ser recuperado. Tem certeza que deseja excluir?"
    (onCancel)="foodToRemove = null"
    (onConfirm)="excludeItem()"
  >
  </app-confirm-modal>
</app-default-layout>
