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 ChainTab extends cc.Component {
    private wallet: JCWallet

    @property({
        type: ButtonGroup
    })
    btnGroup: ButtonGroup = null

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

    // onLoad () {}

    start () {
        this.wallet = new JCWallet()
        this.btnGroup.node.on(BTN_SELECT_INDEX_CHANGE, 
            this.onChainSelectChange)
        this.updateChains()
    }

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

    // update (dt) {}

    updateChains() {
        const chains = this.wallet.chainList
        if (!chains || chains.length === 0) {
            return;
        }
        this.node.removeAllChildren()
        let i = 0;
        for (const chain of chains) {
            const btn = cc.instantiate(this.btnPreb)
            const btnM: TextBtn = btn.getComponent(TextBtn)
            this.btnGroup.addBtn(btnM);
            btnM.title = chain.name
            btnM.index = i ++
            btnM.selected = this.wallet.currentChain.id === chain.id
        }
    }

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