import { AppKernel } from '@scripts/app/AppKernel';
import { ShowNode } from '@scripts/components/loopList/LoopList';
import { IGameInfo } from '@scripts/store/gameStore/data';
import { setSpriteFrame } from '@scripts/utils/ResHelper';
import { addBtnClick, removeBtnClick } from '@scripts/utils/UIHelper';
import { _decorator, Button, Color, Component, Label, Node, Size, Sprite } from 'cc';
const { ccclass, property } = _decorator;

interface IGameData extends IGameInfo {
    index?: number,
    size?: Size,
}

@ccclass('GameItem')
export class GameItem extends ShowNode<IGameData> {
    @property(Sprite)
    gameIcon: Sprite;

    @property(Sprite)
    btnFavo: Sprite;

    @property(Label)
    lblGameName: Label;


    protected onLoad(): void {
        addBtnClick(this.node, this.onClick, this);
        addBtnClick(this.btnFavo.node, this.onBtnFavoClick, this);
    }

    protected onDestroy(): void {
        removeBtnClick(this.node, this.onClick, this);
        removeBtnClick(this.btnFavo.node, this.onBtnFavoClick, this);
    }

    public initShow() {
        if (!this.node.active) this.node.active = true;
        this.lblGameName.string = this.data.gameName;
        this.btnFavo.color = this.data.isFavorite ? Color.WHITE : Color.GRAY;
        setSpriteFrame(this.gameIcon, "https://cdn.usgamestatic.com/24680/game/lw/bankersbreachcollisionways@1x.webp");
    }

    private onClick() {
        // AppKernel.appLobby.openGame(this._gameConfig.id);
    }

    private async onBtnFavoClick() {
        const gameStore = AppKernel.stores.gameStore;
        if (gameStore.favoriting) return;

        const isFavorite = this.data.isFavorite;
        const game = isFavorite ? await gameStore.reqFavoRemove(this.data.gameID)
            : await gameStore.reqFavoAdd(this.data.gameID);

        if (!!game) {
            this.data = game;
            this.initShow();
        }
    }
}