import { Component, OnInit } from '@angular/core';
import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonContent,
  IonGrid,
  IonHeader,
  IonItem,
  IonList,
  IonRow,
  IonTextarea,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-aipicture-page',
  templateUrl: './aipicture-page.component.html',
  styleUrls: ['./aipicture-page.component.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonTextarea,
    IonButton,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonCardTitle,
    IonGrid,
    IonList,
    IonItem,
    IonRow,
  ],
})
export class AipicturePageComponent implements OnInit {
  needs: string = '画一张logo， 主题是健身，要求精简大气';
  promptInput(ev: any) {
    this.needs = ev.detail.value;
  }

  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 || [];
    });
  }

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

    // ai生成更详细的内容
    let PromptTemplate = `请您作为一名专业的美术大家，请根据以下需求给出更详细的补充，用最少的文字表达出来。需求有：${this.needs}`;
    console.log(PromptTemplate);

    let completion = new FmodeChatCompletion([
      { role: 'system', content: '' },
      { role: 'user', content: PromptTemplate },
    ]);

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

      if (message?.complete) {
        console.log(this.PictureDescResult);

        let PicturePrompt = `${this.PictureDescResult}风格，画面不带任何文字。`;
        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');
          }
        });
      }
    });
  }
  ngOnInit() {}
}
