import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
import { IonTextarea, IonButton, IonInput } from "@ionic/angular/standalone";
import { DalleOptions, FmodeChatCompletion, ImagineWork } from 'fmode-ng';

@Component({
  selector: 'app-page-learningplaning',
  templateUrl: './page-learningplaning.component.html',
  styleUrls: ['./page-learningplaning.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonButton,
    IonTextarea, IonInput
  ],
})
export class PageLearningPlaningComponent implements OnInit {
  userPrompt: string = "书法的握笔姿势"
  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }
  imagineWork: ImagineWork | undefined
  images: Array<string> = []
  constructor(
    private cdRef: ChangeDetectorRef
  ) {
    // 示例任务，自己生成图片后请存储新的ID
    this.imagineWork = new ImagineWork("lpJGiFwWeA");
    this.imagineWork.fetchTask().then(work => {
      this.images = this.imagineWork?.images || [];
    })
  }

  async createImage() {
    this.imagineWork = new ImagineWork();

    let PromptTemplate = `
    您作为一名专业的绘画老师，请您根据用户描述的知识内容，将知识可视化为图片。以下是用户的口述：${this.userPrompt}
    `

    let PictureDescResult = ``//画面描述结果
    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: this.userPrompt }
    ])
    completion.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content)
      // 赋值消息内容给组件内属性
      PictureDescResult = message.content
      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
        this.isComplete = true
        let PicturePrompt = `${PictureDescResult}\n风格:简笔画。画面不带任何文字。突出重点。
。`
        let options: DalleOptions = { prompt: PicturePrompt }
        this.imagineWork?.draw(options).subscribe(work => {
          console.log("imagineWork", work?.toJSON())
          console.log("images", work?.get("images"))
          if (work?.get("images")?.length) {
            this.images = work?.get("images");
          }
        })
        this.isComplete = false
      }
    })


  }
  ngOnInit() { }
}