import { Component, OnInit } from '@angular/core';
import { TestChatCompletion, TestChatMessage } from './class-test-chat-completion';
import { TestRxjsChatCompletion } from './class-rxjs-chat-completion';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {

  messageList: Array<TestChatMessage> = [];
  userInput: string = "";

  completion: TestChatCompletion;

  public student: any = {
    cityList: ['学前', '小学', '中学', '大学'],
    city: '小学'
  }

  translationResults = [
    { text: "" },
  ]
  shigeOptions: any;

  words: { word: string, pronunciation: string, definition: string }[] = [
    { word: "apple", pronunciation: "ˈæpəl", definition: "苹果" },
    { word: "banana", pronunciation: "bəˈnænə", definition: "香蕉" },
    { word: "cherry", pronunciation: "ˈʧɛri", definition: "樱桃" },
    { word: "date", pronunciation: "deɪt", definition: "枣" },
    { word: "elderberry", pronunciation: "ˈɛldərˌbɛri", definition: "接骨木果" },
    { word: "fig", pronunciation: "fɪɡ", definition: "无花果" },
    { word: "grape", pronunciation: "ɡreɪp", definition: "葡萄" },
    { word: "honeydew", pronunciation: "ˈhʌniˌdu", definition: "蜜瓜" },
    { word: "kiwi", pronunciation: "ˈkiːwi", definition: "猕猴桃" },
    { word: "lemon", pronunciation: "ˈlɛmən", definition: "柠檬" },
    { word: "mango", pronunciation: "ˈmæŋɡoʊ", definition: "芒果" },
    { word: "nectarine", pronunciation: "ˈnɛktərɪn", definition: "油桃" },
    { word: "orange", pronunciation: "ˈɔrɪndʒ", definition: "橙子" },
    { word: "papaya", pronunciation: "pəˈpaɪə", definition: "木瓜" },
    { word: "quince", pronunciation: "kwɪns", definition: "榅桲" },
    { word: "raspberry", pronunciation: "ˈræzˌbɛri", definition: "覆盆子" },
    { word: "strawberry", pronunciation: "ˈstrɔˌbɛri", definition: "草莓" },
    { word: "tangerine", pronunciation: "ˈtændʒəˌrin", definition: "橘子" },
    { word: "ugli", pronunciation: "ˈʌɡli", definition: "丑橘" },
    { word: "vanilla", pronunciation: "vəˈnɪlə", definition: "香草" }
  ];
  currentWordIndex: number = 0;
  currentWord: { word: string, pronunciation: string, definition: string } = { word: "", pronunciation: "", definition: "" };
  learningCompleted: boolean = false;

  constructor() {
    // 测试类：纯fetch读取http event stream数据
    this.completion = new TestChatCompletion(this.messageList)

    // 测试类：rxjs封装的可观察对象
  }

  ngOnInit() {
  }

  sendMessage() {
    this.messageList.push({
      role: "user",
      content: this.userInput
    })
    this.userInput = ""

    this.translationResults = [{ text: "" }];
    // this.completion.createCompletionByStream()

    // messageList在competion内部，已经赋予了完整的message
    // 下方暴露出来的可订阅内容，主要是用于关键字过滤，或者其他开发逻辑的续写
    let testChatCompletion = new TestRxjsChatCompletion(this.messageList);
    testChatCompletion.createCompletionByStream().subscribe({
      next: ({ content, cumulativeContent, done }) => {
        console.log(`Content: ${content}`);
        console.log(`Cumulative Content: ${cumulativeContent}`);
        if (done) {
          console.log('Stream completed');
        }
        this.translationResults[0].text = cumulativeContent;
      },
      error: err => console.error(err),
      complete: () => console.log('Observable completed')
    });

  }

  startLearning() {
    this.currentWordIndex = 0;
    this.learningCompleted = false;
    this.currentWord = this.words[this.currentWordIndex];
  }

  nextWord() {
    this.currentWordIndex++;
    if (this.currentWordIndex < this.words.length) {
      this.currentWord = this.words[this.currentWordIndex];
    } else {
      this.learningCompleted = true;
      this.currentWord = { word: "", pronunciation: "", definition: "" };
    }
  }
}