const {ccclass, property} = cc._decorator;
import TextBtn, { TEXTBTN_CLICKED } from "./comp/TextBtn";
import WalletBase from "./WallerBase";

export const BTN_SELECT_INDEX_CHANGE = 'btn_select_index_change'

@ccclass
export default class ButtonGroup extends WalletBase {
    @property({
        type: [TextBtn]
    })
    btns: TextBtn[] = [];

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {
        super.start()
    }

    // update (dt) {}
    resetBtns() {
        for (let btn of this.btns) {
            btn.node.off(TEXTBTN_CLICKED);
        }
        this.btns.length = 0
        this.node.removeAllChildren()
    }

    addBtn(btn: TextBtn) {
        this.btns.push(btn);
        btn.node.on(TEXTBTN_CLICKED, this.onChildBtnClicked.bind(this))
        this.node.addChild(btn.node);
    }

    onChildBtnClicked(data: {index: number}) {
        console.log(`textbtn clicked: ${JSON.stringify(data)}`)
        for (let btn of this.btns) {
            btn.selected = btn.index === data.index
        }
        this.node.emit(BTN_SELECT_INDEX_CHANGE, data)
    }
}