import { eventTarget, PLAY_ROLLING_SOUND } from "../Events";

const { ccclass, property } = cc._decorator;

@ccclass
export default class HuController extends cc.Component {
    @property(cc.Label)
    private text: cc.Label = null;

    private spine: sp.Skeleton = null;

    private _isRotate: boolean = false;
    private _pointStart: cc.Vec2 = null;
    private _x: number = 0;
    private _y: number = 0;
    private _z: number = 0;
    private _count = 0;
    private _isShake = false;

    protected onLoad(): void {
        this.spine = this.node.getComponent(sp.Skeleton);

        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)

        this.spine.setCompleteListener(() => this.setRotateAnim());
        this.scheduleOnce(this.testDevice, 2);
    }

    private testDevice() {
        window.addEventListener("devicemotion", (event) => {
            if (!event.accelerationIncludingGravity) {
                return;
            }

            const x = event.accelerationIncludingGravity.x;
            const y = event.accelerationIncludingGravity.y;
            const z = event.accelerationIncludingGravity.z;

            if (x - this._x > 5 || y - this._y > 5 || z - this._z > 5) {
                if (this._isShake) {
                    this._count++;
                }
            }

            if (x - this._x < -5 || y - this._y < -5 || z - this._z < -5) {
                if (!this._isShake) {
                    this._count++;
                }
            }

            if (this._count > 0) {
                this.scheduleOnce(() => {
                    this._count = 0;
                }, 2)
            }

            if (this._count > 5) {
                this._count = 0;
                this.shakeBottle();
            }

            this._x = x;
            this._y = y;
            this._z = z;
        });
    }

    private shakeBottle() {
        eventTarget.emit(PLAY_ROLLING_SOUND);
        cc.tween(this.node)
            .to(0.2, { position: cc.v3(20, 0, 0) })
            .to(0.2, { position: cc.v3(-20, 0, 0) })
            .to(0.2, { position: cc.v3(20, 0, 0) })
            .to(0.2, { position: cc.v3(-20, 0, 0) })
            .to(0.2, { position: cc.v3(0, 0, 0) })
            .start();
    }

    private onTouchStart(event: cc.Event.EventTouch): void {
        console.log('onTouchStart',)
        if (!this._pointStart) {
            this.setRotateAnim();
        }
        this._pointStart = event.getLocation();
        this.spine.timeScale = 0;
    }

    private onTouchEnd(): void {
        this.scheduleOnce(() => this.spine.timeScale = 0, 0.5);
    }

    private onTouchMove(event: cc.Event.EventTouch): void {
        const newPoint = event.getLocation();
        const distance = newPoint.x - this._pointStart.x;
        if (Math.abs(distance) < 5) {
            this.spine.timeScale = 0;
            return;
        }

        this._pointStart = newPoint;
        this.spine.timeScale = distance > 0 ? -1 : 1;
    }

    private setRotateAnim(): void {
        this.spine.setAnimation(1, "Rotate", false);
        this.spine.timeScale = this._pointStart ? 0 : 0.5;
    }

    private pauseAnim(): void {
        this.spine.timeScale = 0;
    }

    private unPauseAnim(): void {
        this.spine.timeScale = 0.5;
    }

    private toggleAnim(): void {
        if (this._isRotate) {
            this.unPauseAnim();
        } else {
            this.pauseAnim();
        }
        this._isRotate = !this._isRotate;
    }

    private setIdleAnim(): void {
        this.spine.setAnimation(1, "Idle", false);
    }
}
