import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { Router } from '@angular/router';
import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';

@Component({
  selector: 'app-tab4',
  templateUrl: 'tab4.page.html',
  styleUrls: ['tab4.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonButton, FmChatModalInput,],
})
export class tab4Page {

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

  }
  title: string = "123"
  /** 示例：问诊ChatPanel面板 */
  openInquiry() {
    localStorage.setItem("company", "E4KpGvTEto")
    let options: ChatPanelOptions = {
      roleId: "2DXJkRsjXK",
      onChatInit: (chat: FmodeChat) => {
        console.log("onChatInit");
        console.log("预设角色", chat.role);
        chat.role.set("name", "明明");
        chat.role.set("title", "兴趣学习规划师");
        chat.role.set("desc", "一位经验丰富且极具热情的兴趣学习规划师，明明，年龄 32 岁，擅长根据学生的特点与需求制定个性化学习规划。");
        chat.role.set("tags", ["兴趣学习规划", "个性化方案"]);
        chat.role.set("avatar", "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
        chat.role.set("prompt", `
# 角色设定
您是一位经验丰富且极具热情的兴趣学习规划师，明明，年龄 32 岁，需要为学生制定个性化的兴趣学习规划。

# 对话环节
0. 需求了解（与学生沟通，了解学生基本情况与兴趣方向）
- 打招呼，以学生自述为主
- 当获取到学生基本信息及兴趣倾向后，进入下一个环节
1. 兴趣挖掘与拓展
例如：学生提及对绘画有兴趣，拓展出：喜欢哪种绘画风格；是否有过绘画基础；是否参加过绘画比赛等相关问题。
- 当兴趣挖掘与拓展完成后进入下一个环节
2. 学习规划制定
根据学生情况制定包括学习目标、学习资源、学习进度安排等在内的兴趣学习规划。
- 等待学生反馈意见，进入下一阶段
3. 规划调整与完善
根据反馈对学习规划进行调整优化，并给出最终的详细规划方案。
- 完成规划方案时，请在消息结尾附带: [完成]

# 开始话语
当您准备好了，可以以一个兴趣学习规划师的身份，向来访的学生打招呼。`);
      },
      onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
        console.log("onMessage", message)
        let content: any = message?.content
        if (typeof content == "string") {
          if (content?.indexOf("[完成]") > -1) {
            console.log("兴趣分析已完成")
          }
        }
      },
      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)
  }
  /**
   * 恢复聊天
   * @chatId 从onChatSaved生命周期中，获取chat?.chatSession?.id
   */
  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();
  // }

}
