import { Component, contentChild } from '@angular/core';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton,
  IonCard, IonCardHeader, IonCardTitle, IonCardContent,
  IonList, IonItem, IonLabel, IonAvatar, IonInput, IonIcon,
  IonThumbnail, 
 } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
// import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-input/modal-audio-message/modal-audio-message.component';
// 引用设计的对象类和查询类
import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonButton,
    // ASR语音输入模块
    FmChatModalInput, 
    // ModalAudioMessageComponent
    CommonModule, IonCard, IonCardHeader, IonCardTitle, IonCardContent,
  IonList, IonItem, IonLabel, IonAvatar, IonInput, IonIcon, IonThumbnail,

  ]
})
export class Tab3Page {

  constructor(
    private modalCtrl:ModalController,
    private router:Router,
    ) {

  }


  /** 示例：搭子聊天面板 */
  async opendazi(filmpartner:CloudObject){
    //验证用户登录
    let currentUser = new CloudUser();
    if(!currentUser?.id){
      console.log("用户未登录，请登录后重试");
      let user = await openUserLoginModal(this.modalCtrl);
      if(!user?.id){
        return
      }
    }
    
    localStorage.setItem("company","E4KpGvTEto")
    
    let filmchat = new CloudObject("FilmChat");
    let now = new Date();
    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
    filmchat.set({
      title:`${currentUser?.get("username")}与${filmpartner?.get("name")}的聊天记录${dateStr}`,
      filmpartner:filmpartner.toPointer(),
      user:currentUser.toPointer(),
      dialogue: [],
    })
    

    let options:ChatPanelOptions = {
      roleId:"2DXJkRsjXK",
      onChatInit:(chat:FmodeChat)=>{
        console.log("onChatInit");
              console.log("预设角色",chat.role);
              chat.role.set("name",filmpartner?.get("name"));
              chat.role.set("age",filmpartner?.get("age"));
              chat.role.set("title","资深剧迷");
              chat.role.set("desc",filmpartner?.get("desc"));
              // chat.role.set("tags",["全能","活泼开朗"]);
              chat.role.set("avatar",filmpartner?.get("avatar") || "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
              chat.role.set("prompt",`
# 角色设定
你是${filmpartner?.get("desc")}，${filmpartner?.get("name")}，年龄${filmpartner?.get("age")}岁，全能且活泼开朗，需要完成一次轻松愉快的看剧感悟分享的陪聊服务。

# 对话环节
1.开始话题（根据用户最近在看的影视剧，围绕具体情节、角色分析、剧情走向等陪用户聊天）
2.主动提出话题
- 先说自己的感受，询问用户觉得哪个情节让他影响最深刻或者喜欢什么类型的影视剧等等。
3.拓展的聊天细节
例如：用户表达出对某个角色的喜爱，拓展出：是否喜欢这一类型的角色，是否喜欢演员本人等。
4.话题走向
- 根据用户过往的回答，推测用户偏好，据此回答用户的新对话。
- 推给用户推荐影视剧时，除非用户特意要求，否则先行推荐新播出的影视剧。
4.结束聊天
- 委婉的和用户结束聊天，若用户还想继续聊天可以再陪伴一会儿。
- 若用户有结束聊天的意愿，在聊天的最后表达期待和用户的下次聊天。在消息结尾附带: [完成]

# 开始话语
当你准备好了，可以以一个追剧搭子的身份，向用户打招呼，开启话题，询问他/她最近在看什么影视剧。`);
      },
      onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
        console.log("onMessage",message)
        // let content:any = message?.content
        // if(typeof content == "string"){
          // if(content?.indexOf("[完成]")>-1){
          //   console.log("陪聊已完成")

             filmchat.set({
                dialogue: chat.messageList// 保存聊天内容
             });

             filmchat.save()
          // }
        // }
      },
      onChatSaved:(chat:FmodeChat)=>{
        // chat?.chatSession?.id 本次会话的 chatId
        console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
      }
    }
    openChatPanelModal(this.modalCtrl,options)
  }



  /** 示例：角色聊天面板 */
  async openrole(filmrole:CloudObject){
    //验证用户登录
    let currentUser = new CloudUser();
    if(!currentUser?.id){
      console.log("用户未登录，请登录后重试");
      let user = await openUserLoginModal(this.modalCtrl);
      if(!user?.id){
        return
      }
    }
    
    localStorage.setItem("company","E4KpGvTEto")
    
    let filmchat = new CloudObject("FilmChat");
    let now = new Date();
    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
    filmchat.set({
      title:`${currentUser?.get("username")}与${filmrole?.get("name")}的聊天记录${dateStr}`,
      filmrole:filmrole.toPointer(),
      user:currentUser.toPointer(),
      dialogue: [],
    })
    
    // let chatMessages: string[] = []; // 用于保存所有聊天记录

    let options:ChatPanelOptions = {
      roleId:"2DXJkRsjXK",
      onChatInit:(chat:FmodeChat)=>{
        console.log("onChatInit");
              console.log("预设角色",chat.role);
              chat.role.set("name",filmrole?.get("name"));
              chat.role.set("age",filmrole?.get("age"));
              chat.role.set("title",filmrole?.get("title"));
              chat.role.set("desc",filmrole?.get("desc"));
              // chat.role.set("tags",["全能","活泼开朗"]);
              chat.role.set("avatar",filmrole?.get("avatar") || "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
              chat.role.set("prompt",`
# 角色设定
你是${filmrole?.get("title")}，你叫${filmrole?.get("name")}，大家一般叫你${filmrole?.get("nickname")}，你的背景描述如下：${filmrole?.get("description")}，你的性格特点如下：${filmrole?.get("traits")}，需要完成一次轻松愉快陪聊服务。

# 对话环节
1.开始话题（根据角色设定陪用户聊天）
2.主动提出话题
- 先破冰，介绍自己，引导用户介绍他自己。
4.话题走向
- 根据设定的剧情背景，性格特点等等陪用户聊天。
4.结束聊天
- 委婉的和用户结束聊天，若用户还想继续聊天可以再陪伴一会儿。
- 若用户有结束聊天的意愿，在聊天的最后表达期待和用户的下次聊天。在最后一条消息结尾附带: [完成]

# 开始话语
当你准备好了，可以以${filmrole?.get("name")}的身份，向用户打招呼，开启话题。`);
      },
      onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
        console.log("onMessage",message)
        // let content:any = message?.content
        // if(typeof content == "string"){
          // if(content?.indexOf("[完成]")>-1){
          //   console.log("陪聊已完成")

              filmchat.set({
                dialogue: chat.messageList// 保存聊天内容
              });

             filmchat.save()
          // }
        // }
      },
      onChatSaved:(chat:FmodeChat)=>{
        // chat?.chatSession?.id 本次会话的 chatId
        console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
      }
    }
    openChatPanelModal(this.modalCtrl,options)
  }




//   openChat(){
//     let options:ChatPanelOptions = {
//       roleId:"2DXJkRsjXK",
//       onChatSaved:(chat:FmodeChat)=>{
//         // chat?.chatSession?.id 本次会话的 chatId
      
// console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)

//       },

//     }
//     openChatPanelModal(this.modalCtrl,options)
//   }

//   restoreChat(chatId:string){
//     let options:ChatPanelOptions = {
//       roleId:"2DXJkRsjXK",
//       chatId:chatId
//     }
//     openChatPanelModal(this.modalCtrl,options)
//   }

//   goChat(){
//     this.router.navigateByUrl("/chat/session/role/2DXJkRsjXK")
//   }



  // audioModalHeightPoint:number = 0.35;
  // async startTalk(){
  //   // 根据手机兼容性，适配组件弹出高度
  //   let height = document.body.clientHeight || 960;
  //   this.audioModalHeightPoint = Number((165/height).toFixed(2));

  //   // 弹出组件
  //   let modal:any
  //   let chat:any
  //   modal = await this.modalCtrl.create({
  //     component:ModalAudioMessageComponent,
  //     componentProps:{
  //       chat:chat,
  //       modal:modal,
  //       onBreakPointSet:()=>{
  //         modal?.setCurrentBreakpoint(this.audioModalHeightPoint)
  //       }
  //     }
  //   })
  //   modal.present();
  // }



  ngOnInit() {
    // 生命周期：页面加载后，运行搭子和角色列表，加载函数
    this.loadFilmPartnerList()
    this.loadFilmRoleList()
  }

  // 创建用于数据列表存储的属性
  filmpartnerList:Array<CloudObject> = []
  filmroleList:Array<CloudObject> = []
  // 查询并加载列表的函数
  async loadFilmPartnerList(){
    let query = new CloudQuery("FilmPartner");
    this.filmpartnerList = await query.find()
  }
  async loadFilmRoleList(){
    let query = new CloudQuery("FilmRole");
    this.filmroleList = await query.find()
  }
}

