const { ccclass, property } = cc._decorator;

@ccclass
export default class CatPopThenBounce extends cc.Component {
    @property
    autoPlay: boolean = true;

    @property
    allowReplay: boolean = false;

    @property
    popDuration: number = 0.85;

    @property
    overshootScale: number = 1.12;

    private baseY: number = 0;
    private baseScaleX: number = 1;
    private baseScaleY: number = 1;
    private hasPlayed: boolean = false;

    onLoad() {
        this.baseY = this.node.y;
        this.baseScaleX = this.node.scaleX;
        this.baseScaleY = this.node.scaleY;

        if (this.autoPlay) {
            this.playPopThenBounce();
        }
    }

    playPopThenBounce() {
        if (this.hasPlayed && !this.allowReplay) {
            return;
        }

        this.hasPlayed = true;
        this.node.stopAllActions();
        this.node.scaleX = 0;
        this.node.scaleY = 0;

        cc.tween(this.node)
            .to(this.popDuration * 0.55, {
                scaleX: this.baseScaleX,
                scaleY: this.baseScaleY,
            }, { easing: "sineOut" })
            .to(this.popDuration * 0.2, {
                scaleX: this.baseScaleX * this.overshootScale,
                scaleY: this.baseScaleY * this.overshootScale,
            }, { easing: "sineInOut" })
            .to(this.popDuration * 0.25, {
                scaleX: this.baseScaleX,
                scaleY: this.baseScaleY,
            }, { easing: "sineInOut" })
            .call(() => {
                this.startBounce();
            })
            .start();
    }

    startBounce() {
        this.node.stopAllActions();
        this.node.scaleX = this.baseScaleX;
        this.node.scaleY = this.baseScaleY;

        cc.tween(this.node)
            .repeatForever(
                cc.tween()
                    .to(0.2, { y: this.baseY - 4, scaleX: this.baseScaleX * 1.08, scaleY: this.baseScaleY * 0.94 }, { easing: "sineInOut" })
                    .to(0.24, { y: this.baseY + 8, scaleX: this.baseScaleX * 0.93, scaleY: this.baseScaleY * 1.08 }, { easing: "sineInOut" })
                    .to(0.18, { y: this.baseY - 2, scaleX: this.baseScaleX * 1.03, scaleY: this.baseScaleY * 0.98 }, { easing: "sineInOut" })
                    .to(0.22, { y: this.baseY, scaleX: this.baseScaleX, scaleY: this.baseScaleY }, { easing: "sineOut" })
            )
            .start();
    }

    onDestroy() {
        this.node.stopAllActions();
    }
}