import { MarkdownPreviewModule } from 'fmode-ng';
import { Component } 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, IonFab, IonFabButton, IonFabList, IonBackButton } 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,CloudUser } from '../lib/ncloud';
import { Router } from '@angular/router';
import {
  chevronDownCircle,
  chevronForwardCircle,
  chevronUpCircle,
  colorPalette,
  document,
  globe,
} from 'ionicons/icons';
addIcons({ airplane, bluetooth, call, wifi });
addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe });
@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonLabel, ArticleCardComponent, CommonModule, IonButton,
    IonSegment, IonSegmentButton,
    IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard,
    IonModal, IonButtons, IonSearchbar, MarkdownPreviewModule
]
})

export class Tab2Page {
  

currentSlide = 0;
intervalId: any;
setSlidePosition() {
  // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
}





  products: Array<CloudObject> = []; // 当前显示的科普信息
  allCards: Array<CloudObject> = []; // 所有科普信息
  admin:string = 'nRDdxdEn2k'
  user : CloudUser 
  //搜索功能
  searchTerm: string = '';

  async searchProducts(event: any) {
    this.searchTerm = event.detail.value.toLowerCase();
    console.log('搜索词:', this.searchTerm);
    
    if (this.searchTerm) {
      this.products = this.allCards.filter(product =>
        product.get('username').toLowerCase().includes(this.searchTerm) ||
        product.get('title').toLowerCase().includes(this.searchTerm) ||
        product.get('category').toLowerCase().includes(this.searchTerm) ||
        product.get('content2')[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;



  type:"短篇小说"|"工具箱" = "短篇小说"
content = ''
  constructor(
    private modalCtrl:ModalController,
    private router:Router,
  ) { 
    this.user = new CloudUser();
    this.loadmyCards(); // 初始化时加载所有科普信息
  }

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

  // async loadCards() {
  //   const query = new CloudQuery('NovelAriticle');
  //   this.allCards = await query.find(); 
  //   console.log(this.allCards);
  //   this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
  //   console.log(this.cards);
  // }
  async loadmyCards() {
    let user = new CloudUser();
    const query = new CloudQuery('NovelAriticle');
    if(user.id == this.admin){   
      this.allCards = await query.find(); 
    console.log(this.allCards);
    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
    console.log(this.cards);

     }else{
    query.equalTo("user",user?.id)
    console.log("user",user.id)
    this.allCards = await query.find(); 
    console.log(this.allCards);
    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
    console.log(this.cards);
  }
  }




 
  ngOnInit() {
    this.loadmyCards();
  }

}