import { Component, OnInit } from '@angular/core';
import { ModalController, IonRouterOutlet} from '@ionic/angular';
import { FoodDetailPage } from '../food-detail/food-detail.page';

@Component({
    selector: 'app-meal',
    templateUrl: './meal.page.html',
    styleUrls: ['./meal.page.scss'],
})
export class MealPage implements OnInit {

    meals = [
        {title: "Wholegrain/high fibre cereal + cows milk", photo: "https://assets.bonappetit.com/photos/57b08765f1c801a1038bd8be/16:9/w_1280,c_limit/hummus-and-feta-sandwiches-on-whole-grain-bread-646.jpg", meal: "Breakfast"}, 
        {title: "Sushi with grilled chicken or salmon + seaweed salad", photo: "https://www.kitchensanctuary.com/wp-content/uploads/2019/07/Salmon-Sushi-Salad-wide-FS.jpg", meal: "Lunch"}, 
        {title: "Tuna in extra virgin olive oil stirred through pasta + green beans", photo: "https://food-images.files.bbci.co.uk/food/recipes/tuna_rocket_and_lemon_95118_16x9.jpg", meal: "Dinner"}
    ];
    constructor(private modalController: ModalController, private routerOutlet: IonRouterOutlet) { }

    ngOnInit() {
    }

    async presentModal(food) {
        const modal = await this.modalController.create({
            component: FoodDetailPage,
            //initialBreakpoint: 0.5,
            //breakpoints: [0, 0.5, 1],
            swipeToClose: true,
            presentingElement: this.routerOutlet.nativeEl,
            componentProps: {
                'food': food
            }
        });
        return await modal.present();
    }

}
