import {
  _decorator,
  Color,
  Component,
  Label,
  Node,
  Sprite,
  tween,
  UIOpacity,
  Vec3,
} from "cc";
import { GlobalData } from "../config/GlobalData";
import AudioEffect from "../libs/AudioEffect";
import { EventDispatcher } from "../libs/EventDispatcher";
import Common from "../libs/Common";
const { ccclass, property } = _decorator;

interface MoodItem {
  id: number;
  title: string;
  bestScore: number;
  isLocked: number;
  unlockGold: number;
}

@ccclass("MoodListItem")
export class MoodListItem extends Component {
  // 保存当前列表项数据对象
  private itemObj: MoodItem = null;

  start() {
    // 监听当前节点的点击事件
    this.node.on(Node.EventType.TOUCH_END, this.onClickMusicItem, this);
    // 监听选中音乐列表某一个 item 事件
    EventDispatcher.getTarget().on(
      EventDispatcher.SELECT_MOOD_ITEM,
      this.onSelectMusicItem,
      this,
    );
    // 监听解锁音乐列表某一个 item 事件
    EventDispatcher.getTarget().on(
      EventDispatcher.UNLOCK_MOOD_ITEM,
      this.onUnlockMusicItem,
      this,
    );
    // 设置小恐龙颜色
    this.setDionColor();
  }

  onClickMusicItem() {
    // 播放点击音效
    AudioEffect.playClickAudio();
    // 选中当前列表项
    this.setSelected();
    // 设置动画 先缩小到 0.9 再还原到 1
    tween(this.node)
      .to(0.1, { scale: new Vec3(0.9, 0.9, 1) })
      .to(0.1, { scale: new Vec3(1, 1, 1) })
      .start();
  }

  onUnlockMusicItem(id: number) {
    // 如果当前列表项的 id 与不是解锁的音乐 id 不处理
    if (this.itemObj?.id != id) return;
    // 设置当前音乐项未解锁状态
    this.itemObj.isLocked = 0;
    // 刷新有无锁定状态显示
    this.setLockState(this.itemObj);
    // 设置选中状态
    this.setSelected();
    // 存储解锁状态
    Common.unlockMusic(id);
  }

  // 选中音乐列表某一个 item 事件
  onSelectMusicItem(id: number) {
    if (this.itemObj.id == id) return;
    // 设置未选中状态
    this.setUnSelected();
  }

  // 初始化列表项节点
  init(item: MoodItem) {
    // 保存当前列表项数据对象
    this.itemObj = item;

    // 设置列表项的标题
    this.node.getChildByName("music_title").getComponent(Label).string =
      item.title;
    // 设置有无锁定状态显示
    this.setLockState(item);
    // 如果当前列表项是默认选中项 则设置选中状态
    if (item.id == GlobalData.selectedMusicID) {
      this.setSelected();
    }
    // // 设置列表项的金币数;
    // this.node.getChildByName("gold").getComponent(Label).string =
    //   this.itemObj.unlockGold.toString();
    // 监听点击事件
    //   moodItem.on(Node.EventType.TOUCH_END, this.onClickMusicItem, this);
  }

  // 设置有无锁定状态显示
  setLockState(item: MoodItem) {
    if (item.isLocked == 0) {
      // 解锁状态
      this.node.getChildByName("best_score").active = true;
      this.node.getChildByName("locked").active = false;
      this.node
        .getChildByName("best_score")
        .getChildByName("score_num")
        .getComponent(Label).string = this.itemObj.bestScore.toString();
    } else {
      // 锁定状态
      this.node.getChildByName("best_score").active = false;
      this.node.getChildByName("locked").active = true;
    }
  }

  // 设置选中状态
  setSelected() {
    // 获取透明度组件
    const opacity = this.node
      .getChildByName("list_item_bg")
      .getComponent(UIOpacity);
    // 设置透明度为255
    opacity.opacity = 200;
    // 获取选中图标节点
    const selectNode = this.node.getChildByName("dino");

    selectNode.active = true;
    // 派发选中某一个 item 事件
    EventDispatcher.getTarget().emit(
      EventDispatcher.SELECT_MOOD_ITEM,
      this.itemObj.id,
    );
  }

  // 设置未选中状态
  setUnSelected() {
    // 获取透明度组件
    const opacity = this.node
      .getChildByName("list_item_bg")
      .getComponent(UIOpacity);
    // 设置透明度为255
    opacity.opacity = 255;
    // 获取选中图标节点
    const selectNode = this.node.getChildByName("dino");
    selectNode.active = false;
  }

  // 设置小恐龙颜色
  setDionColor() {
    // 获取选中图标节点
    const selectNode = this.node.getChildByName("dino");
    // 设置选中图标节点的颜色为小恐龙颜色
    selectNode.getComponent(Sprite).color = new Color(
      GlobalData.currentDinoInfo.dinoColor,
    );
  }

  update(deltaTime: number) {}
}