const {ccclass, property} = cc._decorator;

import lib = require("../BiBeng/Library");
import webView = require("../BiBeng/WebView");
import WebViewListener from "../BiBeng/WebViewListener";
import Utils from "../Game/Utils";
import PIFS from "../PIFS";

@ccclass
export default class MatchView extends cc.Component {
    @property(cc.Node)
    player1: cc.Node = null;
    @property(cc.Node)
    player2: cc.Node = null;
    @property(cc.Node)
    player3: cc.Node = null;
    @property(cc.Node)
    player4: cc.Node = null;

    @property(cc.Node)
    titleTxt: cc.Node = null;
    @property(cc.Node)
    timeTxt: cc.Node = null;
    @property(cc.Node)
    waitTxt: cc.Node = null;

    @property({type: cc.AudioClip})
    successAudio: cc.AudioClip = null;

    @property(cc.Node)
    meteorLine: cc.Node = null;
    @property(cc.Node)
    matchEffectNode: cc.Node = null;

    aiTag: number;
    matchTime: number;
    name1: cc.Node;
    aiNameArr: cc.Node[];
    gender1: cc.Node;
    aiGenderArr: cc.Node[];
    avatarSp1: cc.Node;
    aiAvatarSpArr: cc.Node[];
    aiPlayerArr: cc.Node[];

    quckTest: boolean = false;

    static Instance: MatchView;

    onLoad() {
        MatchView.Instance = this;

        // if (window.location.href.includes(":7456")) this.quckTest = true;
        if (this.quckTest) cc.director.getScheduler().setTimeScale(20);
        this.init();

        this.schedule(this.countTime, 1, cc.macro.REPEAT_FOREVER, 0);
    }

    protected start(): void {
        if (lib.openInWebview()) {
            webView.init(this.node);
            this.node.on('onGameInit', this.onGameInit, this);
            WebViewListener.Init();
        } else {
            webView.userName = PIFS.myPlayerInfo.nickname;
            webView.gender = PIFS.myPlayerInfo.gender;
            webView.avatarBase64 = PIFS.myPlayerInfo.avatarUrl;
            this.onGameInit();
        }
    }

    onDestroy() {
        if (MatchView.Instance == this) MatchView.Instance = null;
        if (this.quckTest) cc.director.getScheduler().setTimeScale(1);
    }

    init() {
        this.aiTag = 0;
        this.matchTime = 0;

        this.name1 = this.player1.getChildByName('Name');
        this.aiNameArr = [
            this.player2.getChildByName('Name'),
            this.player3.getChildByName('Name'),
            this.player4.getChildByName('Name')
        ]

        this.gender1 = this.player1.getChildByName('Gender');
        this.aiGenderArr = [
            this.player2.getChildByName('Gender'),
            this.player3.getChildByName('Gender'),
            this.player4.getChildByName('Gender')
        ]

        this.avatarSp1 = this.player1.getChildByName('Mask').getChildByName('AvatarSp');
        this.aiAvatarSpArr = [
            this.player2.getChildByName('Mask').getChildByName('AvatarSp'),
            this.player3.getChildByName('Mask').getChildByName('AvatarSp'),
            this.player4.getChildByName('Mask').getChildByName('AvatarSp')
        ];

        this.aiPlayerArr = [
            this.player2,
            this.player3,
            this.player4
        ]

        for(let i = 0;i<this.aiPlayerArr.length;i++){
            this.aiPlayerArr[i].active = false;
        }
    }

    countTime() {
        this.timeTxt.getComponent(cc.Label).string = Utils.FormatSecToMinSec(this.matchTime);
        this.matchTime++;
    }

    setGender(genderNode: cc.Node, gender) {
        let iconBoy = genderNode.getChildByName('IconBoy');
        let iconGirl = genderNode.getChildByName('IconGirl');
        if (gender == 1) {
            iconBoy.active = false;
            iconGirl.active = true;
        } else {
            iconBoy.active = true;
            iconGirl.active = false;
        }
    }

    matched() {
        this.meteorLine.active = true;
        this.titleTxt.getComponent(cc.Label).string = "匹配成功";
        this.timeTxt.active = false;
        this.waitTxt.active = false;
        this.matchEffectNode.active = false;
        cc.audioEngine.playEffect(this.successAudio, false);
    }

    close() {
        this.node.destroy()
    }

    static isGameInited: boolean = false;
    onGameInit() {
        console.log("MatchView-onGameInit")
        PIFS.myPlayerInfo.nickname = webView.userName;
        PIFS.myPlayerInfo.gender = webView.gender;
        PIFS.myPlayerInfo.avatarUrl = webView.avatarBase64;
        MatchView.isGameInited = true;
        this.renderMyPlayerInfo();
        window.gm.socketPlayer.requestEnterRoom();
    }

    renderMyPlayerInfo() {
        this.name1.getComponent(cc.Label).string = PIFS.myPlayerInfo.nickname;
        this.setGender(this.gender1, PIFS.myPlayerInfo.gender);
        Utils.LoadSpriteFrame(PIFS.myPlayerInfo.avatarUrl, (frame) => {
            this.avatarSp1.getComponent(cc.Sprite).spriteFrame = frame;
        });
    }

    renderOtherPlayerInfo(userName, gender, avatarBase64, delay) {
        this.scheduleOnce(() => {
            let aiTag = this.aiTag++;
            this.aiNameArr[aiTag].getComponent(cc.Label).string = userName;
            this.setGender(this.aiGenderArr[aiTag], gender);
            Utils.LoadSpriteFrame(avatarBase64, (frame) => {
                this.aiPlayerArr[aiTag].active = true;
                this.aiAvatarSpArr[aiTag].getComponent(cc.Sprite).spriteFrame = frame;
            });
        }, delay);
    }

    static handleMatchSuccess() {
        if (!MatchView.Instance) return;
        let delay = 0;
        for (let i = 0; i < PIFS.matchPlayerInfos.length; i++) {
            if (i !== window.gameSystem.masterId) {
                let e = PIFS.matchPlayerInfos[i];
                MatchView.Instance.renderOtherPlayerInfo(e.nickname, e.gender, e.avatarUrl, delay);
                delay += 0.3;
            }
        }
        MatchView.Instance.matched();
    }
}