import { Component, OnInit } from '@angular/core';
import { 
  IonBackButton, 
  IonButtons, 
  IonContent, 
  IonHeader, 
  IonIcon, 
  IonItem, 
  IonItemOption, 
  IonItemOptions, 
  IonItemSliding, 
  IonLabel, 
  IonList, 
  IonThumbnail, 
  IonTitle, 
  IonToolbar,
  IonButton
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, heartOutline, trash, timeOutline, refresh } from 'ionicons/icons';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';

interface CollectionItem {
  id: number;
  name: string;
  image: string;
  time?: Date;
}

@Component({
  selector: 'app-page-collections',
  templateUrl: './page-collections.page.html',
  styleUrls: ['./page-collections.page.scss'],
  standalone: false,
  // imports: []
})
export class PageCollectionsPage implements OnInit {
  collections: CollectionItem[] = [];

  constructor(private navCtrl: NavController,private router:Router) { 
    addIcons({ heart, heartOutline, trash });
  }

  ngOnInit() {
    //this.loadCollections();
    this.loadRecipeFavoriteList();
  }

  recipeFavoriteList: CloudObject[] = []; // 存储RecipeFavorite的CloudObject
  recipeDataList: any[] = []; // 存储Recipe表的完整data数据
  
  async loadRecipeFavoriteList() {
    const query = new CloudQuery("RecipeFavorite");
    query.include("recipe"); // 联查Recipe表
    const favorites = await query.find();

    console.log('favorites',favorites);
    
    
    this.recipeFavoriteList = favorites.map(fav => fav.get("recipe"));
    // this.recipeDataList = this.recipeFavoriteList.map(recipe => recipe.data);
    
    console.log("Recipe数据列表:", this.recipeFavoriteList);
  }

  // loadCollections() {
  //   // 模拟数据 - 实际应该从本地存储或API获取
  //   this.collections = [
  //     {
  //       id: 1,
  //       name: '意大利肉酱面',
  //       image: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb',
  //       time: new Date('2023-05-15')
  //     },
  //     {
  //       id: 2,
  //       name: '奶油蘑菇汤',
  //       image: 'https://images.unsplash.com/photo-1547592180-85f173990554',
  //       time: new Date('2023-05-10')
  //     },
  //     {
  //       id: 3,
  //       name: '番茄炒蛋',
  //       image: 'https://images.unsplash.com/photo-1582456891920-7a6a13cc5c4a',
  //       time: new Date('2023-05-05')
  //     }
  //   ];
  // }

  removeCollection(id: number) {
    // 模拟删除操作 - 实际应该更新本地存储或API
    this.collections = this.collections.filter(item => item.id !== id);
  }
  // goToDetail(recipeId: any) {
  //   // this.navCtrl.navigateForward(["tabs", "tab1", "page-detail", recipe.objectId]);
  //   this.navCtrl.navigateForward(`/tabs/tab1/page-detail/${recipeId}`);
  //   console.log('Navigating to page-detail');
  // }

  goToDetail(recipeId : any) {
    this.navCtrl.navigateForward(`/tabs/tab3/page-collections/page-collections-detail/${recipeId}`);
    console.log('Navigating to page-collections-detail');
  }
}