import { Component, NgModule } from '@angular/core';
import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { addIcons } from 'ionicons';
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
import { ArticleCardComponent } from '../component/article-card/article-card.component';
import { CommonModule } from '@angular/common';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';
import { NavigationLanComponent } from '../component/navigation-lan/navigation-lan.component';
import { Router } from '@angular/router';
addIcons({ airplane, bluetooth, call, wifi });

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
    IonSegment, IonSegmentButton,NavigationLanComponent,
    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
    IonModal,IonIcon, IonButtons, IonSearchbar
  ]
})

export class Tab2Page {
  products: Array<CloudObject> = []; // 当前显示的科普信息
  allCards: Array<CloudObject> = []; // 所有科普信息

  //搜索功能
  searchTerm: string = '';

  async searchProducts(event: any) {
    this.searchTerm = event.detail.value.toLowerCase();
    if (this.searchTerm) {
      this.products = this.allCards.filter(product =>
        product.get('topic').toLowerCase().includes(this.searchTerm) ||
        product.get('title').toLowerCase().includes(this.searchTerm) ||
        product.get('category').toLowerCase().includes(this.searchTerm) ||
        product.get('content')[0].toLowerCase().includes(this.searchTerm)
      );
    } else {
      this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
    }
  }

  isModalOpen = false;
  currentProduct: any;      // 当前选择的科普信息

  openDetailModal(product?: any) {
    this.isModalOpen = true;
    this.currentProduct = product;
  }
  closeDetailModal() {
    this.isModalOpen = false;
    this.currentProduct = null;
  }
  shareDetail = false;
  shareDetailModal() {
    this.shareDetail = true;
    // 在这里确保模态框的aria-hidden属性被正确处理
    setTimeout(() => {
      const modalElement = document.querySelector('ion-modal');
      if (modalElement) {
        modalElement.setAttribute('aria-hidden', 'false');
      }
    }, 0);
  }
  closeShareModal(){
    this.shareDetail = false;
      // 在这里确保模态框关闭时处理aria-hidden属性
    const modalElement = document.querySelector('ion-modal');
    if (modalElement) {
      modalElement.setAttribute('aria-hidden', 'true');
    }
  }
  copyLink() {
    console.log('复制链接');
  }
  type:"hotdot"|"export"|"sleep"|"life"|"男"|"女" = "hotdot"

  constructor(
    private modalCtrl:ModalController,
    private router:Router,
  ) { }

  cards: Array<CloudObject> = []; // 当前显示的分类卡片
  async typeChange(ev: any) {
    this.type = ev?.detail?.value || ev?.value || 'hotdot';
    console.log(this.type);
    await this.loadCards(); // 重新加载卡片
  }

  async loadCards() {
    const query = new CloudQuery('HotDot');
    this.allCards = await query.find(); // 执行查询并获取结果
    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
  }

  ngOnInit() {
    this.loadCards();
  }

}
