import { Component } from '@angular/core';
import { 
  IonAvatar,IonHeader ,IonButton,IonCol,IonContent,
  IonItem,IonLabel,IonRow,IonTitle,IonToolbar,ModalController,
  IonIcon,
  NavController,
  ItemReorderEventDetail,
  IonReorder,
  IonReorderGroup
   , } from '@ionic/angular/standalone';
import { CloudUser } from 'src/lib/ncloud';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';

import { addIcons } from 'ionicons';
import { bookmarkOutline, footstepsOutline, helpCircle, lockClosedOutline, notificationsOutline, settings } from 'ionicons/icons';
import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';



 
@Component({
  selector: 'app-tab4',
  templateUrl: 'tab4.page.html',
  styleUrls: ['tab4.page.scss'],
  standalone: true,
  imports: [  
      IonHeader,IonToolbar,IonTitle,IonContent,IonAvatar,IonLabel,IonButton,IonRow,IonCol,
      IonItem,IonIcon,IonReorder,IonReorderGroup,
  ],
})
export class Tab4Page {
  userInfo: any = {
    username: 'yi',
    // 其他用户信息字段...
  };
  public isDisabled = true;
  avatarUrl: string = 'assets/img/1.png'; // 默认头像路径
 
  currentUser:CloudUser|undefined
  constructor(private modalCtrl:ModalController, private navCtrl: NavController) {
    this.currentUser = new CloudUser();
    addIcons({helpCircle,notificationsOutline,settings,lockClosedOutline,bookmarkOutline,footstepsOutline});
  
  }
  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);
  }


  goToHelp() {
    this.navCtrl.navigateForward('/help');
  }
  goToHistory() {
    this.navCtrl.navigateForward('/history');
  }
  goToLike() {
    this.navCtrl.navigateForward('/like');
  }
  goToMyposts() {
    this.navCtrl.navigateForward('/myposts');
  }
  goToInform() {
    this.navCtrl.navigateForward('/inform');
  }
  goToPrivacy() {
    this.navCtrl.navigateForward('/privacy');
  }
  goToSetting() {
 
  }



  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
    // The `from` and `to` properties contain the index of the item
    // when the drag started and ended, respectively
    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);

    // Finish the reorder and position the item in the DOM based on
    // where the gesture ended. This method can also be called directly
    // by the reorder group
    ev.detail.complete();
  }

  toggleReorder() {
    this.isDisabled = !this.isDisabled;
  }




}
