// 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, getLv, getMinLv } from "../util_PK_Game";
import Player from "./player_PK_Game";



const { ccclass, property } = cc._decorator;

@ccclass
export default class MatchLayer extends cc.Component {

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

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

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

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

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

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

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


    blueX: number;
    redX: number;
    matchCount: number;


    onLoad() {

        this.matchAniNode.active = false;
        this.blueBar.active = false;
        this.redBar.active = false;
        this.vsNode.active = false;

        this.blueX = this.blueBar.x;
        this.redX = this.redBar.x;

        this.matchCount = 0;
        this.schedule(() => {
            this.matchlb.string = `寻找中${[".", "..", "..."][this.matchCount % 3]}`;
            this.matchCount++
        }, 0.4)
    }


    async startMatch(data) {

        this.blueBar.active = false;
        this.redBar.active = false;
        this.vsNode.active = false;
        this.blueHead.getComponent(Player).init(data.url);

        let lv = getLv(data.score);
        let minlv = getMinLv(data.score);
        lv = Math.min(lv, 3);
        minlv = Math.min(minlv, 4);
        let lvstr = ["黑铁", "青铜", "白银", "黄金"][lv]
        let minlvstr = ["I", "II", "III", "IV", "V"][minlv];
        this.blueLv.string = lvstr + "" + minlvstr;

        this.blueName.string = data.name;

        this.blueBar.x = this.blueX - cc.winSize.width;
        this.redBar.x = this.blueX + cc.winSize.width;

        await asyncDelay(0.1);
        this.blueBar.active = true;
        cc.log(",,,,,,,,,,,,,," + cc.easeBackInOut.name)
        cc.tween(this.blueBar).to(0.35, { x: this.blueX }, { easing: "sineIn" }).start()

        await asyncDelay(1.5);
        this.matchCount = 0;
        this.searchNode.active = true;
        this.matchNode.active = false;
        this.redLv.node.active = false;
        this.redName.node.active = false;
        this.redBar.active = true;
        cc.tween(this.redBar).to(0.3, { x: this.redX }, { easing: "sineIn" }).start()

    }

    async addOther(data, callback) {

        this.redBar.active = true;
        this.searchNode.active = false;
        this.matchNode.active = true;
        this.redLv.node.active = true;
        this.redName.node.active = true;
        this.redHead.getComponent(Player).init(data.headUrl);
        // this.redLv.string = data.lv;
        let lv = getLv(data.score);
        let minlv = getMinLv(data.score);
        lv = Math.min(lv, 3);
        minlv = Math.min(minlv, 4);
        let lvstr = ["黑铁", "青铜", "白银", "黄金"][lv]
        let minlvstr = ["I", "II", "III", "IV", "V"][minlv];
        this.redLv.string = lvstr + "" + minlvstr;

        this.redName.string = data.name;

        this.vsNode.active = true;
        this.vsNode.scale = 1.5;
        this.vsNode.opacity = 0;


        this.matchAniNode.active = true;
        cc.tween(this.vsNode).to(0.3, { opacity: 255, scale: 1 }).start();

        await asyncDelay(0.6);
        this.matchAniNode.active = false;
        cc.tween(this.vsNode).to(0.1, { opacity: 0 }).start();
        cc.tween(this.blueBar).by(0.3, { x: -cc.winSize.width }, { easing: "sineIn" }).start()
        cc.tween(this.redBar).by(0.3, { x: cc.winSize.width }, { easing: "sineIn" }).start()
        await asyncDelay(0.4);

        callback && callback()

    }

    // update (dt) {}
}
