import { WALLET_HIDE_MODAL, WALLET_SHOW_MODAL } from "../common/WalletEvent";
import { IQRCfg } from "./comp/QRCodeComp";
import WalletBase from "./WallerBase";

const {ccclass, property} = cc._decorator;


@ccclass
export default class ModalLayer extends WalletBase {

    @property(cc.Prefab)
    menuPreb: cc.Prefab = null

    @property(cc.Prefab)
    accountPreb: cc.Prefab = null

    @property(cc.Prefab)
    qrPreb: cc.Prefab = null

    @property(cc.Node)
    contentNode: cc.Node = null

    subNodeMap: Map<string, cc.Node> = new Map()

    prebInfo = {
        'qr': 'QrNode'
    }

    onLoad () {
        super.onLoad()
        this.wallet.uiHandlers.on(WALLET_SHOW_MODAL, this.showModal.bind(this))
        this.wallet.uiHandlers.on(WALLET_HIDE_MODAL, this.hideModal.bind(this))
    }
    
    private fetchNode(tag: string, preb: cc.Prefab) {
        if (!this.subNodeMap.has(tag)) {
            const node = cc.instantiate(preb)
            node.x = 0
            node.y = 0
            this.subNodeMap.set(tag, node)
        }
        this.contentNode.addChild(this.subNodeMap.get(tag))
        return this.subNodeMap.get(tag)
    }

    showModal({tag, data}: {tag: string, data: any}) {
        this.node.active = true
        let preb = this[`${tag}Preb`]
        if (!preb) {
            console.log('show modal with error: no modal preb found')
            return 
        }
        const node = this.fetchNode(tag, preb);
        if (this.prebInfo[tag]) {
            node.getComponent(this.prebInfo[tag])['init'](data)
        }
        node.active = true
    }

    hideModal() {
        this.contentNode.removeAllChildren()
        this.node.active = false
    }

    showMenuPanel() {
        const tag = 'menu-node'
        const node = this.fetchNode(tag, this.menuPreb)
        node.active = true
    }

    showQrPanel(data: IQRCfg) {
        const tag = 'qr-node'
        const node = this.fetchNode(tag, this.qrPreb)
        node.getComponent('QrNode').showQr(data)
        node.active = true
    }

    showAccountList() {
        const tag = 'account-list-node'
        const node = this.fetchNode(tag, this.accountPreb)
        node.active = true
    }

}