// Learn TypeScript:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html

import LocalStorage from "../../Data/LocalStorage";
import UIManager from "../UIManager";
import ScreenUI, { ScreenName } from "./ScreenUI";

const { ccclass, property } = cc._decorator;

@ccclass
export default class MainScreen extends ScreenUI {

    @property(cc.Node)
    logo: cc.Node = null;

    @property([cc.Prefab])
    listWormPrefab: cc.Prefab[] = [];
    @property(cc.Node)
    containerSkins: cc.Node = null;

    isMove: boolean = true;
    listWorm: cc.Node[] = [];
    currentIndex: number = 0;
    moveDuration: number = 0.5;

    override initialize(uiManager: UIManager): void {
        super.initialize(uiManager);
        this.screenName = ScreenName.MAINMENU;
        this.initializeListWorm();

    }

    initializeListWorm() {
        this.listWorm = [];
        this.containerSkins.removeAllChildren();
        this.currentIndex = 0;
        let listWormActive: [number] = LocalStorage.getWormActive();
        let newListWorm: cc.Prefab[] = this.listWormPrefab.filter((item, i ) => {
            return !listWormActive.includes(i);
        })
        for (let index = 0; index < newListWorm.length; index++) {
            let worm: cc.Node = cc.instantiate(newListWorm[index]);
            this.containerSkins.addChild(worm);
            if (index == 0) {
                worm.position = cc.v3(0, 0);
            } else {
                worm.position = cc.v3(450);
            }
            this.listWorm.push(worm);
        }
    }

    btnNextWorm() {
        if (this.currentIndex < this.listWorm.length - 1 && this.isMove) {
            this.currentIndex++;
            this.moveItems(true);
        }
    }

    btnPreWorm() {
        if (this.currentIndex > 0 && this.isMove) {
            this.currentIndex--;
            this.moveItems(false);
        }
    }

    moveItems(isNext: boolean) {
        this.isMove = false;
        cc.tween(this.listWorm[this.currentIndex])
                .to(this.moveDuration, { position: cc.v3(0, 0) , scale: 1.2  })
                .call(()=> {
                    this.isMove = true;
                })
                .start();
        if (isNext) {
            cc.tween(this.listWorm[this.currentIndex - 1])
            .to(this.moveDuration, { position: cc.v3(-450, 0), scale: 1 })
            .start();        

        } else {
            cc.tween(this.listWorm[this.currentIndex  + 1 ])
                .to(this.moveDuration, { position: cc.v3(450, 0), scale: 1 })
                .start();
        }
    }

    override active(): void {
        super.active();
        cc.tween(this.logo)
            .to(0.3, { position: cc.v3(0, 500) }, { easing: "bounceOut" })
            .start();
    }

    override deactive(): void {
        super.deactive();
        this.logo.position = cc.v3(0, 1132);
    }

    onClickRemoveAds() {
        this.uiManager.showMessage("Is Comming");
    }

    onClickLevel(){
        this.uiManager.activeScreen(ScreenName.LEVEL);
    }
}
