import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'Tab1.page.html',
  styleUrls: ['Tab1.page.scss'],
})
export class Tab1Page {
  isSearching = false;
  searchQuery = '';
  filteredItems: string[] = [];
  searchHistory = ['历史搜索项1', '历史搜索项2'];
  searchSuggestions = [
    '比心十周年·免单真金等你拿',
    '十年如初·因你而延续'
  ];
  popularRooms = [
    { title: '故事读文💗心安', subtitle: '直播间', image: 'assets/room1.jpg' },
    { title: '欢迎来到大东北', subtitle: '聊天室', image: 'assets/room2.jpg' },
    { title: '有听过这样温柔...', subtitle: '聊天室', image: 'assets/room3.jpg' },
    { title: '[配对]赖 c', subtitle: '80s💗', image: 'assets/room4.jpg' },
    { title: '[海龟汤] 0707', subtitle: 'DM.狐狸✌️', image: 'assets/room5.jpg' },
    { title: '浪漫播客🎧💗...', subtitle: '浪漫播客.小 e', image: 'assets/room6.jpg' }
  ];

  recommendedPlayers = [
    { name: 'Player 1', info: '技术大神', avatar: 'assets/avatar1.png' },
    { name: 'Player 2', info: '包赢承诺', avatar: 'assets/avatar2.png' },
    { name: 'Player 3', info: '优质声优', avatar: 'assets/avatar3.png' },
    { name: 'Player 4', info: '同城代练', avatar: 'assets/avatar4.png' },
  ];

  selectedSegment = 'online';

  constructor() {}

  showSearch() {
    this.isSearching = true;
  }

  hideSearch() {
    this.isSearching = false;
  }

  segmentChanged(event: any) {
    this.selectedSegment = event.detail.value;
  }

  filterChats() {
    const query = this.searchQuery.toLowerCase();
    this.filteredItems = this.recommendedPlayers.filter(player => player.name.toLowerCase().includes(query)).map(player => player.name);
  }
}
