import { Component, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { addIcons } from 'ionicons';
import { bookmarkOutline, cartOutline, documentTextOutline, downloadOutline, ellipsisHorizontal, heartOutline, imageOutline, imagesOutline, search, timeOutline, walletOutline } from 'ionicons/icons';



import { EnvironmentInjector,inject } from '@angular/core';
import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
import { CloudUser } from 'src/lib/ncloud';
import { ModalController } from '@ionic/angular/standalone';
import { AlertController } from '@ionic/angular/standalone'; // 导入所需的模块

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [ExploreContainerComponent, IonicModule, CommonModule],
})
export class Tab3Page {
  profile = {
    name: 'X',
    level: 'X',
    vipStatus: true,
    avatar: '../../assets/image/default-avatar.png', // 默认头像路径
    buttons: [
      { icon: 'time-outline', text: '浏览记录' },
      { icon: 'download-outline', text: '我的下载' },
      { icon: 'cart-outline', text: '我的购买' },
      { icon: 'wallet-outline', text: '我的钱包' }
    ],
    tabs: [
      { icon: 'images-outline', text: '全部' },
      { icon: 'image-outline', text: '图文' },
      { icon: 'document-text-outline', text: '文章' }
    ]
  };

  showTabs = false;
  activeTab: string = 'all';
  public environmentInjector = inject(EnvironmentInjector);

  currentUser:CloudUser|undefined
  constructor(private router: Router,

    private alertController: AlertController,
    private modalCtrl:ModalController) {
    this.currentUser = new CloudUser();
    addIcons({search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline});
  }

  toggleTabs(action: string) {
    this.showTabs = true;
    this.activeTab = action === 'like' ? 'all' : 'collect';
  }

  setActiveTab(tab: string) {
    this.activeTab = tab;
  }

  navigateToLogin() {
    this.router.navigate(['/tabs/login']);
  }

  editName() {
    const newName = prompt("请输入新的名字", this.profile.name); // 仅示例
    if (newName) {
      this.profile.name = newName;
    }
  }

  openVipPage() {
    // 这里可以添加逻辑来导航到VIP开通页面
    alert("导航到VIP开通页面");
  }

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      const reader = new FileReader();

      reader.onload = (e: any) => {
        this.profile.avatar = e.target.result; // 将读取的图片设置为头像
      };

      reader.readAsDataURL(file); // 读取文件为Data URL
    }
  }


























 



  async login(){
    // 弹出登录窗口
    let user = await openUserLoginModal(this.modalCtrl);
    if(user?.id){
      this.currentUser = user
    }
  }
  async signup(){
    // 弹出注册窗口
    let user = await openUserLoginModal(this.modalCtrl,"signup");
    if(user?.id){
      this.currentUser = user
    }
  }
  logout(){
    this.currentUser?.logout();
  }
  editUser(){
    openUserEditModal(this.modalCtrl)
  }
editTags:Array<String>=[]
    async setTagsValue(ev:any){
     let currentUser = new CloudUser();
     let userPrompt = ``
     if(!currentUser?.id){
       console.log("用户未登录，请登录后重试");
       let user = await openUserLoginModal(this.modalCtrl);
       if(!user?.id){
         return
       }
       currentUser = user;
     }
   //console.log("setTagsValue",ev);
   this.editTags=ev;
 }
 async showAlert() {
  const alert = await this.alertController.create({
    header: '提示', // 提示框的标题
    message: '请先登录以查看个人信息。', // 提示框的消息
    buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
  });

  await alert.present(); // 显示提示框
}





}