import { _decorator, Component, director, find, Label, Node, ProgressBarComponent, SkeletalAnimation, SkeletalAnimationComponent, Skeleton, sp, Sprite, SpriteFrame, tween, Tween, UITransform, v3 } from 'cc';
import { DEV, EDITOR } from 'cc/env';
import { NodePoolManager } from '../../Main/Scripts/managers/NodePoolManager';
import { GameDataManager } from '../../Main/Scripts/managers/GameDataManager';
import { IconMsg } from './IconMsg';
import { AudioManager } from '../../Main/Scripts/managers/AudioManager';

const { ccclass, property } = _decorator;

enum ICON_STATE {
    IDLE = 0,
    FAST = 1,
    HIDE = 2,
}

@ccclass('Icon')
export class Icon extends Component {

    @property(Node)
    normalNode: Node = null;

    @property(Node)
    fastNode: Node = null;

    @property(Node)
    spineNode: Node = null;

    @property(Node)
    multiNode: Node = null;

    // @property(Node)
    // bombNode: Node = null;

    @property([SpriteFrame])
    multiSpriteFrames: SpriteFrame[] = [];
    @property([SpriteFrame])
    blurMultiSpriteFrames: SpriteFrame[] = [];
    @property([sp.SkeletonData])
    multiSpines: sp.SkeletonData[] = [];

    private iconId: number = 99;
    private lheight: number = 1;
    private rollerId: number = 0;
    private state: ICON_STATE = ICON_STATE.IDLE;
    private isFastMode: boolean = false;
    private isMulti: boolean = false;
    private isScatter: boolean = false;

    set index(id: number) { this.iconId = id; this.isMulti = id === 10; this.isScatter = id === 0; }
    get index(): number { return this.iconId }

    // get isWildOrScatter(): boolean {
    //     return this.isWild || this.isScatter;
    // }

    resetState() {
        this.unscheduleAllCallbacks();
        Tween.stopAllByTarget(this.node);

        this.node.scale = v3(1, 1, 1);

        this.state = ICON_STATE.IDLE;

        this.node.active = true;
        this.normalNode.active = true;
        this.showFastIcon(false);
        this.spineNode.active = false;
        if (this.multiNode) {
            this.multiNode.active = false;
            this.multiNode.setScale(1, 1, 1);
        }
        // if (this.bombNode) {
        //     this.bombNode.active = false;
        //     this.bombNode.setScale(1, 1, 1);
        // }

        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        spine.timeScale = 1;
        if (spine) {
            spine.setCompleteListener(null);
        }

        this.node.targetOff(this.node);
        this.node.off(Node.EventType.TOUCH_END);
        this.node.on(Node.EventType.TOUCH_END, () => {
            this.onClickIconNode();
        })
    }

    initIcon(id: number, lHeight: number = 1, rollerId: number = 0) {
        this.resetState();
        this.index = id;
        this.lheight = lHeight;
        this.rollerId = rollerId;
    }

    showFastIcon(isFast: boolean) {
        if (this.isFastMode === isFast) return;
        this.isFastMode = isFast;
        this.state = isFast ? ICON_STATE.FAST : ICON_STATE.IDLE;
        this.normalNode.active = !isFast;
        this.fastNode.active = isFast;
    }


    checkHasAnimation(spine: sp.Skeleton, animationName: string) {
        let animations = (spine.skeletonData._skeletonJson as any).animations;
        if (animations.hasOwnProperty(animationName)) {
            return true;
        } else {
            return false;
        }
    }

    playIdleSpine(bol: boolean) {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        // if (spine && this.checkHasAnimation(spine, 'idle')) {
        //     if (bol) {
        //         this.normalNode.active = false;
        //         this.spineNode.active = true;
        //         spine.setAnimation(0, 'idle', true);
        //     } else {
        //         this.normalNode.active = true;
        //         this.spineNode.active = false;
        //     }
        // }
        if (this.index == 10) {
            this.normalNode.active = false;
            this.spineNode.active = true;
            spine.setAnimation(0, 'idle', true);
        } else if (this.index == 0) {
            this.normalNode.active = false;
            this.spineNode.active = true;
            spine.setAnimation(0, 'chixu', true);
        } else {
            this.normalNode.active = true;
            this.spineNode.active = false;
        }
    }

    playTanSpine(bol: boolean) {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (spine && this.checkHasAnimation(spine, 'tan')) {
            if (bol) {
                this.normalNode.active = false;
                this.spineNode.active = true;
                spine.setAnimation(0, 'tan', true);
            } else {
                this.normalNode.active = true;
                this.spineNode.active = false;
            }
        }
    }

    playTanSpineForMsg(bol: boolean) {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (spine && this.checkHasAnimation(spine, 'tan')) {
            if (bol) {
                this.normalNode.active = false;
                this.spineNode.active = true;
                spine.timeScale = 0.3;
                spine.setAnimation(0, 'tan', false);
            } else {
                this.normalNode.active = true;
                this.spineNode.active = false;
            }
        }
    }

    playBounceSpine(isLoop: boolean = false) {

        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (spine && this.checkHasAnimation(spine, 'tan')) {
            this.normalNode.active = false
            this.spineNode.active = true;
            spine.setAnimation(0, 'tan', isLoop);

            if (!isLoop) {
                spine.setCompleteListener(() => {
                    spine.setCompleteListener(null);
                    if (this.checkHasAnimation(spine, 'chixu')) {
                        this.playIdleSpine(true);
                    } else {
                        this.normalNode.active = true;
                        this.spineNode.active = false;
                    }
                })
            }
        } else {
            spine.setCompleteListener(null);
            if (this.checkHasAnimation(spine, 'chixu')) {
                this.playIdleSpine(true);
            } else {
                this.normalNode.active = true;
                this.spineNode.active = false;
            }
        }
    }

    playScatterIdleSpine(bol: boolean) {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (spine && this.checkHasAnimation(spine, 'chixu')) {
            if (bol) {
                this.normalNode.active = false;
                this.spineNode.active = true;
            }
        }
    }

    playScatterWaitSpine(bol: boolean) {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (this.iconId == 0) {
            console.log('播放scatter等待动画');
            if (spine && this.checkHasAnimation(spine, 'denggai')) {
                if (bol) {
                    this.normalNode.active = false;
                    this.spineNode.active = true;
                    spine.timeScale = 0.3
                    spine.setAnimation(0, 'denggai', false);
                } else {
                    spine.timeScale = 1
                    this.playIdleSpine(true);
                }
            }
        }
    }

    playMultiSpine() {
        this.spineNode.active = true;
        this.normalNode.active = false;

        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);
        if (spine) {
            spine.setAnimation(0, 'zhongjiang', false);
            spine.setCompleteListener(() => {
                spine.setCompleteListener(null);
                spine.setAnimation(0, 'idle', true);
                // this.spineNode.active = false;
            })
        }
    }

    playDeleteSpine() {
        let spine = this.spineNode.getChildByName('spine').getComponent(sp.Skeleton);

        if (spine && this.checkHasAnimation(spine, 'xiaoshi')) { // 10帧 icon消失， 23帧 全部消失            
            spine.setCompleteListener(null);
            this.normalNode.active = false;
            this.spineNode.active = true;
            spine.setAnimation(0, 'xiaoshi', false);
            spine.setCompleteListener(() => {
                spine.setCompleteListener(null);
                this.spineNode.active = false;
            })
        }

    }

    setMulti(multi: number) {
        if (this.index != 10) return;
        let lab = this.multiNode.getChildByName('Label').getComponent(Label);
        lab.string = multi.toString() + 'x';
        this.normalNode.getChildByName('sprite').getComponent(Sprite).spriteFrame = this.getMultiBgFrames(multi)[0][0]
        this.fastNode.getChildByName('sprite').getComponent(Sprite).spriteFrame = this.getMultiBgFrames(multi)[0][1]
        this.spineNode.getChildByName('spine').getComponent(sp.Skeleton).skeletonData = this.getMultiBgFrames(multi)[1][0]
    }

    getMulti(): number {
        if (!this.multiNode) return 1;
        return Number(this.multiNode.children.find(child => child.active).name);
    }

    getMultiBgFrames(multi: number): any[][] {
        switch (true) {
            case multi <= 8:
                return [[this.multiSpriteFrames[0], this.blurMultiSpriteFrames[0]], [this.multiSpines[0]]]
            case multi <= 25:
                return [[this.multiSpriteFrames[1], this.blurMultiSpriteFrames[1]], [this.multiSpines[1]]]
            case multi <= 50:
                return [[this.multiSpriteFrames[2], this.blurMultiSpriteFrames[2]], [this.multiSpines[2]]]
            case multi <= 100:
                return [[this.multiSpriteFrames[3], this.blurMultiSpriteFrames[3]], [this.multiSpines[3]]]
            case multi <= 1000:
                return [[this.multiSpriteFrames[4], this.blurMultiSpriteFrames[4]], [this.multiSpines[4]]]
        }
    }

    getHeight(): number {
        return this.lheight;
    }

    getIsFastMode(): boolean {
        return this.isFastMode;
    }

    getState(): ICON_STATE {
        return this.state;
    }

    async onClickIconNode() {
        if (GameDataManager.instance.canClickIconMsg) {
            if (this.isMulti) {
                return
            }
            if (this.iconId < 7) {
                AudioManager.instance.playSFX(`Click_icon_${this.iconId}`)

            } else {
                AudioManager.instance.playSFX('Click_icon_7')

            }

            let iconMsg = await NodePoolManager.instance.getNodeFromPoolDynamic('IconMsg', 'Prefab/Others/IconMsg', 'Game');
            let gameNode = find('Canvas/main/game');
            if (!gameNode) return;
            gameNode.addChild(iconMsg);
            let isLeft = this.rollerId < 3;
            iconMsg.getComponent(IconMsg).showIconMsg(this, isLeft);
        }
    }

}