import { CloudObject, CloudQuery } from 'src/lib/ncloud';
import { NavController } from "@ionic/angular/standalone";
import { IonHeader, IonButtons, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonButton, IonIcon, IonBadge, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonGrid, IonRow, IonCol, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption } from "@ionic/angular/standalone";
import { addIcons } from "ionicons";
import { cloudDownload, podium } from "ionicons/icons";
import { Component, OnInit } from '@angular/core';
import { importAllData } from '../import-bird-data';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-page-bird-list',
  templateUrl: './page-bird-list.component.html',
  styleUrls: ['./page-bird-list.component.scss'],
  standalone: true,
  imports: [
    CommonModule,
    IonHeader, IonButtons, IonToolbar, IonTitle,
    IonContent, IonList, IonItem, IonLabel, IonButton, IonIcon,
    IonBadge, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonGrid, IonRow, IonCol, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption]
})
export class PageBirdListComponent implements OnInit {
  birdList: Array<CloudObject> = [];
  expList: Array<CloudObject> = [];
  taxList: Array<CloudObject> = [];
  selectedTaxonomy: CloudObject | null = null;
  selectedExpertise: CloudObject | null = null;

  constructor(
    private navCtrl: NavController
  ) {
    addIcons({ cloudDownload, podium });
  }

  ngOnInit() {
    this.loadBirdData();
  }

  async loadBirdData() {
    let query1 = new CloudQuery("Bird");
    this.birdList = await query1.find();

    let query2 = new CloudQuery("BirdExpertise");
    this.expList = await query2.find();

    let query3 = new CloudQuery("Taxonomy");
    this.taxList = await query3.find();
  }

  goBird(bird: CloudObject) {
    this.navCtrl.navigateForward(['tabs', 'demo', 'bird', 'display', bird?.id]);
  }

  showTaxonomy(bird: CloudObject) {
    const species = bird.get('species');
    this.selectedTaxonomy = this.taxList.find(tax => tax.get('species') === species) || null;
  }

  showExpertise(exp: CloudObject) {
    this.selectedExpertise = exp;
    // 这里可以添加显示专业知识的逻辑，比如打开模态框
  }

  importData() {
    importAllData();
  }

}
