import { Watch } from "../decorator/AutoUpdateUI";
import WalletBase from "./WallerBase";

const {ccclass, property} = cc._decorator;

export const TEXTBTN_CLICKED = 'textbtn_clicked'
@ccclass
export default class TextBtn extends WalletBase {

    @property(cc.Label)
    titleLabel: cc.Label = null;

    @property(cc.Sprite)
    btnSprite: cc.Sprite = null

    @property(cc.SpriteFrame)
    selectSpriteFrame: cc.SpriteFrame = null
    @property(cc.SpriteFrame)
    normalSpriteFrame: cc.SpriteFrame = null

    @Watch()
    @property
    title: string = '';

    @Watch()
    @property
    selected: boolean = false;

    index: number = 0

    @property({
        type: [cc.Color]
    })
    colors = [cc.Color.GRAY, cc.Color.GREEN]

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        super.start()
        this.updateUI()
    }

    updateUI() {
        super.updateUI()
        this.titleLabel.string = this.title
        let color = this.selected ? this.colors[1] : this.colors[0];
        this.titleLabel.node.color = color
        if (this.selected) {
            this.btnSprite.spriteFrame = this.selectSpriteFrame? this.selectSpriteFrame : null
        } else {
            this.btnSprite.spriteFrame = this.normalSpriteFrame? this.normalSpriteFrame : null
        }
    }

    onClick() {
        this.node.emit(TEXTBTN_CLICKED, {index: this.index})
    }
}