import {
  _decorator,
  Component,
  Node,
  tween,
  Vec3,
  UIOpacity,
  Color,
  Label,
  Tween,
  Quat,
} from "cc";
import BaseUI from "../base/BaseUI";
const { ccclass, property } = _decorator;

@ccclass("LoadingText")
export class LoadingText extends BaseUI {
  @property({ type: Color, tooltip: "主顏色" })
  mainColor: Color = new Color(0, 255, 0, 255);

  @property({ type: Color, tooltip: "閃爍顏色" })
  flashColor: Color = Color.WHITE; // 綠色

  protected onLoad(): void {
    super.onLoad();

    let lbl1 = this.FindNode("1");
    let lbl2 = this.FindNode("2");
    let lbl3 = this.FindNode("3");
    let lbl4 = this.FindNode("4");
    let lbl5 = this.FindNode("5");

    this.playAnim(lbl1, lbl2, lbl3, lbl4, lbl5);
  }

  protected start(): void {
    // 確保顏色設置正確
    let lbl1 = this.FindNode("1");
    let lbl2 = this.FindNode("2");
    let lbl3 = this.FindNode("3");
    let lbl4 = this.FindNode("4");
    let lbl5 = this.FindNode("5");

    const labels = [lbl1, lbl2, lbl3, lbl4, lbl5];
    for (let lbl of labels) {
      let labelComp = lbl.getComponent(Label);
      if (labelComp) {
        labelComp.color = this.mainColor;
      }
    }
  }

  playAnim(lbl1: Node, lbl2: Node, lbl3: Node, lbl4: Node, lbl5: Node) {
    const labels = [lbl1, lbl2, lbl3, lbl4, lbl5];
    // 初始化
    for (let lbl of labels) {
      lbl.scale = new Vec3(0, 0, 1);
      lbl.eulerAngles = new Vec3(0, 0, 0);
      let opacity = lbl.getComponent(UIOpacity);
      if (!opacity) {
        opacity = lbl.addComponent(UIOpacity);
      }
      opacity.opacity = 0;
      // 設置主顏色
      let labelComp = lbl.getComponent(Label);
      if (labelComp) labelComp.color = this.mainColor;
    }

    // 依次播放動畫
    let delay = 0;
    labels.forEach((lbl, idx) => {
      tween(lbl)
        .delay(delay)
        .call(() => {
          let opacity = lbl.getComponent(UIOpacity)!;
          opacity.opacity = 0;
          lbl.scale = new Vec3(0, 0, 1);
          lbl.eulerAngles = new Vec3(0, 0, 0);
        })
        // 旋轉+放大+淡入
        .to(
          0.25,
          {
            scale: new Vec3(1.5, 1.5, 1),
            eulerAngles: new Vec3(0, 0, 360),
          },
          { easing: "backOut" }
        )
        .call(() => {
          let opacity = lbl.getComponent(UIOpacity)!;
          opacity.opacity = 255;
        })
        // 彈跳縮放
        .to(0.1, { scale: new Vec3(1, 1, 1) }, { easing: "backIn" })
        .to(0.08, { scale: new Vec3(1.2, 0.8, 1) })
        .to(0.08, { scale: new Vec3(0.9, 1.1, 1) })
        .to(0.08, { scale: new Vec3(1, 1, 1) })
        // 顏色閃爍
        .call(() => {
          let labelComp = lbl.getComponent(Label);
          if (labelComp) {
            let colorTween = tween(labelComp);
            colorTween
              .to(0.08, { color: this.flashColor })
              .to(0.08, { color: this.mainColor })
              .start();
          }
        })
        .start();
      delay += 0.18;
    });

    // 最後集體閃爍+抖動
    let finalTween = tween();
    finalTween
      .delay(delay + 0.5)
      .call(() => {
        for (let lbl of labels) {
          let opacity = lbl.getComponent(UIOpacity)!;
          // 閃爍
          let opacityTween = tween(opacity);
          opacityTween
            .to(0.08, { opacity: 100 })
            .to(0.08, { opacity: 255 })
            .to(0.08, { opacity: 100 })
            .to(0.08, { opacity: 255 })
            .start();
          // 抖動
          let shakeTween = tween(lbl);
          shakeTween
            .to(0.04, { position: lbl.position.add(new Vec3(5, 0, 0)) })
            .to(0.04, { position: lbl.position.add(new Vec3(-10, 0, 0)) })
            .to(0.04, { position: lbl.position.add(new Vec3(10, 0, 0)) })
            .to(0.04, { position: lbl.position })
            .start();
        }
      })
      .start();
  }
}