import { ZMonitor } 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.Node)
    border: cc.Node = null;

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

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

    index: number = 0

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

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    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
        this.border.color = color
    }

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