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

import { asyncDelay } from "../util_PK_Game";
import PicCell from "./picSelectCell_PK_Game";
import Player from "./player_PK_Game";
import TxtCell from "./txiSelectCell_PK_Game";

const { ccclass, property } = cc._decorator;

@ccclass
export default class GameLayer extends cc.Component {

    @property(cc.Node)
    questionBar: cc.Node = null;
    @property(cc.Label)
    questionTime: cc.Label = null;

    @property(cc.Node)
    blueBar: cc.Node = null;
    @property(cc.Node)
    redBar: cc.Node = null;

    @property(cc.Node)
    blueHead: cc.Node = null;
    @property(cc.Node)
    redHead: cc.Node = null;


    @property(cc.Label)
    blueScore: cc.Label = null;
    @property(cc.Label)
    blueName: cc.Label = null;

    @property(cc.Label)
    redScore: cc.Label = null;
    @property(cc.Label)
    redName: cc.Label = null;

    @property(cc.Label)
    lb_info: cc.Label = null;

    @property(cc.Label)
    lb_tips: cc.Label = null;

    @property(cc.ProgressBar)
    timeprobar: cc.ProgressBar = null;

    @property(cc.ProgressBar)
    blueprobar: cc.ProgressBar = null;

    @property(cc.ProgressBar)
    redprobar: cc.ProgressBar = null;

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

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

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


    @property(cc.Node)
    picRoot: cc.Node = null;
    blueX: number;
    redX: number;
    rightIndex: any;
    mainCom: any;
    list: cc.Node[];
    totaltime: number = -1;
    countTime: number;
    cupY: number;
    cupX: number;

    onLoad() {

        this.blueX = this.blueBar.x;
        this.redX = this.redBar.x;
        this.cupX = this.cupStart.x;
        this.cupY = this.cupStart.y;
        this.lb_tips.node.active = false;
    }

    async init(mydata, otherData, callback) {

        this.questionBar.active = false;
        this.txtRoot.active = false;

        this.timeprobar.progress = 1
        this.questionTime.string = "10";


        this.picRoot.active = false;

        this.cupStart.active = true;
        this.cupStart.opacity = 255;
        this.blueBar.x = this.blueX - cc.winSize.width;
        this.redBar.x = this.redX + cc.winSize.width;
        this.cupStart.y = this.cupY + 500;
        this.cupStart.x = this.cupX;
        this.cupStart.scale = 1;

        this.blueHead.getComponent(Player).init(mydata.url);
        this.blueName.string = mydata.name;
        this.blueScore.string = mydata.score;

        this.redHead.getComponent(Player).init(otherData.headUrl);
        this.redName.string = otherData.name;
        this.redScore.string = otherData.score;


        cc.tween(this.cupStart).to(0.15, { y: this.cupY }, { easing: "sineIn" }).start()
        cc.tween(this.blueBar).to(0.35, { x: this.blueX }, { easing: "sineIn" }).start()
        cc.tween(this.redBar).to(0.35, { x: this.redX }, { easing: "sineIn" }).start()

        await asyncDelay(0.5)
        callback && callback();
    }

    async initQuestion(question, index) {


        this.totaltime = -1;
        this.countTime = 0;

        this.rootCover.active = false;

        this.questionBar.active = false;

        this.rightIndex = question.rightIndex;
        let ans = question.ans;

        this.lb_tips.string = `第${index + 1}题`
        this.lb_tips.node.active = true;


        cc.tween(this.lb_tips.node).delay(0.5).by(0.5, { y: -50, opacity: -255, scale: -0.5 }, { easing: "sineOut" }).call(() => {
            this.lb_tips.node.active = false;
            this.lb_tips.node.opacity = 255;
            this.lb_tips.node.scale = 1;
            this.lb_tips.node.y += 50;
        }).start()

        await asyncDelay(1);

        this.rootCover.active = false;
        this.questionBar.active = true;
        this.lb_info.string = question.info;


        if (question.type == 1) {
            this.txtRoot.active = true;
            this.picRoot.active = false;
            this.list = this.txtRoot.children;
            for (let i = 0; i < this.list.length; ++i) {
                this.list[i].opacity = 0;
                cc.tween(this.list[i]).delay(i * 0.1).to(0.2, { opacity: 255 }).start();
                this.list[i].getComponent(TxtCell).init(i, ans[i], i == question.rightIndex, (index) => {

                    if (index == question.rightIndex) {
                        this.mainCom.playLocalAudio("right")
                    } else {
                        this.mainCom.playLocalAudio("wrong")
                    }
                    // this.mainCom.playLocalAudio("btn");
                    this.mainCom.networkHelper.sendFrame({
                        type: "anserQues",
                        uuid: this.mainCom.playerId,
                        index: index
                    });

                    this.rootCover.active = true;

                })
            }



        } else {
            this.txtRoot.active = false;
            this.picRoot.active = true;
            this.list = this.picRoot.children;
            for (let i = 0; i < this.list.length; ++i) {
                this.list[i].opacity = 0;
                cc.tween(this.list[i]).delay(i * 0.1).to(0.2, { opacity: 255 }).start();

                this.list[i].getComponent(PicCell).init(i, ans[i], i == question.rightIndex, (index) => {

                    if (index == question.rightIndex) {
                        this.mainCom.playLocalAudio("right")
                    } else {
                        this.mainCom.playLocalAudio("wrong")
                    }
                    // this.mainCom.playLocalAudio("btn");
                    this.mainCom.networkHelper.sendFrame({
                        type: "anserQues",
                        uuid: this.mainCom.playerId,
                        index: index
                    });

                    this.rootCover.active = true;
                })
            }
        }

        await asyncDelay(0.5);
        this.totaltime = 10.2;
        this.countTime = 0;

    }

    async settle(data) {

        let ans = data.ans;

        for (let i = 0; i < ans.length; ++i) {
            let info = ans[i];
            if (info.uuid != this.mainCom.playerId) {
                this.list[info.index].getComponent(TxtCell)?.onClickItem(null, 2);
                this.list[info.index].getComponent(PicCell)?.onClickItem(null, 2);
            }
        }

        this.redprobar.progress = data.status.redRight / data.status.total;
        this.blueprobar.progress = data.status.blueRight / data.status.total;





        let addBlueScore = +data.status.addBlueScore;
        let addRedScore = +data.status.addRedScore;

        if (addBlueScore > 0) {
            let bluescore = +this.blueScore.string;
            this.blueScore.string = bluescore + data.status.addBlueScore;
            cc.sys.localStorage.setItem("mySocre", +this.blueScore.string)

            let lbnode = cc.instantiate(this.blueScore.node);
            lbnode.parent = this.blueScore.node.parent;
            lbnode.color = cc.Color.RED;
            lbnode.getComponent(cc.Label).string = "+" + addBlueScore;
            cc.tween(lbnode).by(1, { y: 100, opacity: -255 }, { easing: "sineOut" }).removeSelf().start();
        }

        if (addRedScore > 0) {
            let redscore = +this.redScore.string;
            this.redScore.string = redscore + data.status.addRedScore;

            let lbnode = cc.instantiate(this.redScore.node);
            lbnode.parent = this.redScore.node.parent;
            lbnode.color = cc.Color.RED;
            lbnode.getComponent(cc.Label).string = "+" + addRedScore;

            this.mainCom.otherData.score = +this.redScore.string;

            cc.tween(lbnode).by(1, { y: 100, opacity: -255 }, { easing: "sineOut" }).removeSelf().start();
        }



        await asyncDelay(1);



        this.lb_info.string = "";

        this.txtRoot.active = false;

        this.picRoot.active = false;

        this.questionBar.active = false;


        cc.log(data);
    }

    hide() {
        this.redprobar.progress = 0;
        this.blueprobar.progress = 0;

        cc.tween(this.blueBar).to(0.35, { x: this.blueX - cc.winSize.width }, { easing: "sineIn" }).start()
        cc.tween(this.redBar).to(0.35, { x: this.redX + cc.winSize.width }, { easing: "sineIn" }).call(() => {
            this.node.active = false;
        }).start()
    }

    update(dt) {

        if (this.totaltime > 0) {

            this.countTime += dt;

            let left = this.totaltime - this.countTime;

            if (left >= 0) {
                this.timeprobar.progress = (this.totaltime - this.countTime) / this.totaltime;

                this.questionTime.string = "" + Math.floor(this.totaltime - this.countTime)

            } else {

                this.totaltime = -1;
                this.countTime = 0
                this.rootCover.active = true;
            }
        } else {
            this.timeprobar.progress = 1
            this.questionTime.string = "10";
        }
    }
}
