import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
// import Swiper from 'swiper';
import { Router } from '@angular/router';
import Parse from 'parse';
import { ParseService } from 'src/app/services/parse.service';

@Component({
  selector: 'app-smovies',
  templateUrl: './smovies.page.html',
  styleUrls: ['./smovies.page.scss'],
})
export class SMoviesPage implements OnInit {
//
  user:Parse.User|undefined
  ngOnInit(): void {
    this.user = Parse.User.current();
    this.fetchMovies();
  }
//
  constructor(private navCtrl: NavController,private router: Router,private parseService: ParseService) {
    this.fetchMovies();
  }

  search() {
    this.router.navigate(['/search']); // 替换成你的 setting 页面路由路径
  }

  goToBlankPage() {
    // 导航到空白页面
    console.log('Navigating to Blank page');
  }

  firstCol: HTMLElement |null = null;

  //点击变蓝
  filterByCategory(event: any,category: string) {
    const selectedCol = event.target;
    const allCols = document.querySelectorAll('ion-col');
    
    if (!this.firstCol) {
      this.firstCol = document.querySelector('ion-col:first-child');
      if (this.firstCol) {
        this.firstCol.classList.add('blue');
      }
    } else if (this.firstCol) {
      this.firstCol.classList.remove('blue');
    }

    allCols.forEach(col => col.classList.remove('blue'));
    selectedCol.classList.add('blue');
    this.firstCol = selectedCol;

    // 
    // 

    


    if (category === '') {
      this.filteredMovies = this.allMovies;
    } else {
      this.filteredMovies = this.allMovies.filter(movie => movie.get('type') === category);
    }


  }
  
  filteredMovies: any[] = [];
  allMovies: any[] = [];
  searchQuery: string = '';
  selectedType: string = '';
  
  async fetchMovies() {

    const YJMovies = Parse.Object.extend('YJMovies');
    const query = new Parse.Query(YJMovies);
    this.allMovies = await query.find();
    this.filteredMovies = this.allMovies;
    this.filteredMovies = await this.parseService.queryMovies();
  }

  // filterByCategory(event: any, category: string) {
  //   if (category === '') {
  //     this.filteredMovies = this.allMovies;
  //   } else {
  //     this.filteredMovies = this.allMovies.filter(movie => movie.get('type') === category);
  //   }
  // }
  
}
