import { _decorator, Component, Node, sp, Sprite } from 'cc';
import GachaBase from '../Base/GachaBase';
import SpineAnimationHandler, { SocketPath, SpineAnimation, SpineSkin } from '../Base/SpineAnimationHandler';
import GachaManager from '../Manager/GachaManager';
import Utils from '../Utilities';

const { ccclass, property } = _decorator;

class ActiveCard {
    public socket: sp.SpineSocket;
    public node: Node;
    public idReward: string;

    constructor(node: Node, idReward: string) {
        this.node = node;
        this.idReward = idReward;
    }

    public setActive(value: boolean) {
        this.node.setActive(value);
    }
}

@ccclass('LuckyChain')
export default class LuckyChain extends GachaBase {
    @property(SpineAnimationHandler)
    private animationHandler: SpineAnimationHandler;
    @property(Node)
    private spriteRoot: Node;
    @property(Node)
    private cards: Node[] = [];
    @property({ type: SocketPath })
    private cardSlotPath: SocketPath[] = [];

    private _activeCards: ActiveCard[] = [];
    private _allCards: ActiveCard[] = [];
    private _rewardId: string;

    onFocusInEditor(): void {
        this.animationHandler.setPropertySocketPath(this, 'cardSlotPath');
    }

    protected onLoad(): void {
        this.setReward();

        for (let i = 0; i < 4; i++) {
            const card = this._allCards.shift();
            const path = this.cardSlotPath[i];
            const socket = this.animationHandler.addSocket(path, card.node);
            card.setActive(true);
            card.socket = socket;
            this._activeCards.push(card);
        }

        this.animationHandler.setListener((_, e) => {
            switch (e.data.name) {
                case 'card-claimed':
                    const cardRemove = this._activeCards.shift();
                    this._rewardId = cardRemove.idReward;
                    this.animationHandler.removeSocket(cardRemove.socket);
                    cardRemove.setActive(false);
                    cardRemove.socket = null;
                    this._allCards.push(cardRemove);
                    break;
                case 'new-card-spawned':
                    const card = this._allCards.shift();
                    const path = this.cardSlotPath[this.cardSlotPath.length - 1];
                    const socket = this.animationHandler.addSocket(path, card.node);
                    card.setActive(true);
                    card.socket = socket;
                    this._activeCards.push(card);
                    break;
            }
        });
    }

    protected onEnable(): void {
        this.spriteRoot.setActive(false);
    }

    private setReward() {
        this._allCards = this.cards.map((card) => {
            const rw = GachaManager.instance.getRandomReward();
            card.getComponent(Sprite).spriteFrame = rw.icon;
            card.setActive(false);
            return new ActiveCard(card, rw.id);
        });
    }

    public async show(): Promise<void> {
        this.spriteRoot.setActive(true);
        await this.animationHandler.setAnimationAsync('appear');
        await this.animationHandler.addAnimationAsync('active');

        GachaManager.instance.setReward(this._rewardId);

        await Utils.delay(1.5);
        //update socket path
        for (let i = 0; i < 4; i++) {
            const card = this._activeCards[i];
            const path = this.cardSlotPath[i];
            this._activeCards[i].socket = this.animationHandler.updateSocketPath(card.socket, path);
        }
    }
}