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

@Component({
  selector: 'app-dream-picture',
  templateUrl: './dream-picture.component.html',
  styleUrls: ['./dream-picture.component.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, 
    IonButton,
    IonInput,
    IonTextarea
  ],
})
export class DreamPictureComponent  implements OnInit {

  userPrompt: string = "我漫步在月光洒满的小径上，四周被高大的银白色树木环绕，树叶在微风中轻轻摇曳，发出沙沙的声音。远处，湖面如镜，倒映着满天的星辰和一轮明亮的圆月。空气中弥漫着淡淡的花香，令人感到宁静而祥和。忽然，几只发光的萤火虫在空中飞舞，点亮了夜晚的黑暗，整个世界仿佛笼罩在梦幻的光芒中。";

  imagineWork: ImagineWork | undefined;
  images: Array<string> = [];
  PictureDescResult: string = ``;

  constructor() {
    // 示例任务，自己生成图片后请存储新的ID
    this.imagineWork = new ImagineWork("lpJGiFwWeA");
    this.imagineWork.fetchTask().then(work => {
      this.images = this.imagineWork?.images || [];
    });
  }

  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }

  async createImage() {
    this.imagineWork = new ImagineWork();
    
    // 文本生成
    const PromptTemplate = `你是一名专业的美术画家，请根据梦境的内容，将其描述的场景和画面、人物等细节描述出来，简短表达，以梦境为主
梦境内容如下
${this.userPrompt}`;

    const completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: this.userPrompt }
    ]);

    completion.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content);
      // 赋值消息内容给组件内属性
      this.PictureDescResult = message.content;

      if (message?.complete) {
        // 图片生成
        const options: DalleOptions = { prompt: this.userPrompt };
        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");
          }
        });
      }
    });
  }

  ngOnInit() {}

}