import JCWallet from "../JCWallet";
import ButtonGroup, { BTN_SELECT_INDEX_CHANGE } from "./ButtonGroup";
import TextBtn from "./TextBtn";

const {ccclass, property} = cc._decorator;

@ccclass
export default class TokenTab extends cc.Component {
    private wallet: JCWallet
    
    @property({
        type: ButtonGroup
    })
    btnGroup: ButtonGroup = null

    @property({
        type: cc.Prefab
    })
    btnPreb: cc.Prefab = null
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}
    private titles = ['Tokens', 'Hero', 'Weapon', 'Chip']

    start () {
        this.wallet = new JCWallet()
        this.btnGroup.resetBtns()
        this.btnGroup.node.on(BTN_SELECT_INDEX_CHANGE, 
            this.onTokenTypeChange.bind(this))
        this.showAllBtn();
    }

    onDestroy() {
        this.btnGroup.node.off(BTN_SELECT_INDEX_CHANGE)
    }

    // update (dt) {}
    showAllBtn() {
        console.log('show all token tab')
        for (let i = 0, l = this.titles.length; i < l; i++) {
            const btn = cc.instantiate(this.btnPreb)
            const btnM: TextBtn = btn.getComponent(TextBtn)
            this.btnGroup.addBtn(btnM);
            btnM.title = this.titles[i]
            btnM.index = i
            btnM.selected = i === 0
        }
    }

    onTokenTypeChange(data: {index: number}) {
        console.log('on token change: ', JSON.stringify(data))
    }
}