import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg, IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonRippleEffect, IonBackButton } 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';
import { CompMarkmapComponent } from '../comp-markmap/comp-markmap.component';
import { CloudObject } from 'src/lib/ncloud';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
import { InterestSearchComponent } from '../interest-search/interest-search.component';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tab4',
  templateUrl: 'tab4.page.html',
  styleUrls: ['tab4.page.scss'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonNav, IonImg,
    IonSegmentView, IonSegment, IonSegmentButton, IonSegmentContent, IonThumbnail, IonButton,
    IonRippleEffect, IonBackButton, NgSwitch, NgSwitchCase, NgSwitchDefault,
    InterestSearchComponent, FormsModule, CompMarkmapComponent
  ],
})
export class tab4Page {

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

  ) {

  }

  selectedSegment = 'home';
  segmentChanged(ev: any) {
    console.log('Segment changed:', ev.detail.value);
    this.selectedSegment = ev.detail.value;
  }
  title: string = "123"

  /** 展示计划结果Markdown文件 */
  isComplete: boolean = false;
  planMessage: any
  markmapResult: string = "";
  /** 示例：兴趣规划聊天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. 规划调整与完善
        根据反馈对学习规划进行调整优化，并给出最终的详细规划方案。
        - 完成规划方案时，请直接用markmap格式编写方案，具体格式严格按照
        \`\`\` markdown
        # XXX计划
        ## 二级
        - 三级
        - 三级
        \`\`\`
        请直接返回markdown内生成的方案内容，不用有其他的赘述。并且返回的内容结尾要有[完成]

        当您准备好了，可以以一个兴趣学习规划师的身份，向来访的学生打招呼。`);
      },
      onMessage: (chat: FmodeChat, message: FmodeChatMessage) => {
        console.log("onMessage", message)
        let content: any = message?.content
        if (typeof content == "string") {
          if (content?.indexOf("```") > -1) {
            console.log("兴趣分析已完成");
            let markMapContent = content.split("```")[1].slice(9)
            this.markmapResult = markMapContent
            let plan = new CloudObject("GoPlan");
            let now = new Date();
            plan.set({
              title: "计划" + now.getFullYear() + "-" + now.getMonth() + 1 + "-" + now.getDate() + "-" + now.getTime(),
              markmap: markMapContent
            })
            plan.save();
            this.planMessage = message
          }
        }
      },
      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)
  }




  // 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();
  // }

}