const {ccclass, property} = cc._decorator;

@ccclass
export default class MatchPanel extends cc.Component {
    @property({type: cc.SpriteFrame})
    private frameBoy: cc.SpriteFrame = null;
    @property({type: cc.SpriteFrame})
    private frameGirl: cc.SpriteFrame = null;
    @property({type: cc.SpriteFrame})
    private genderBoy: cc.SpriteFrame = null;
    @property({type: cc.SpriteFrame})
    private genderGirl: cc.SpriteFrame = null;

    @property({type: cc.AudioClip})
    private matchSuccess: cc.AudioClip = null;
    @property({type: cc.Animation})
    private meteorLine: cc.Animation = null;

    @property({type: cc.Sprite})
    private frameSelf: cc.Sprite = null;
    @property({type: cc.Sprite})
    private avatarSelf: cc.Sprite = null;
    @property({type: cc.Sprite})
    private genderSelf: cc.Sprite = null;
    @property({type: cc.Label})
    private nameSelf: cc.Label = null;
    @property({type: cc.Sprite})
    private frameOther: cc.Sprite = null;
    @property({type: cc.Sprite})
    private avatarOther: cc.Sprite = null;
    @property({type: cc.Sprite})
    private genderOther: cc.Sprite = null;
    @property({type: cc.Label})
    private nameOther: cc.Label = null;

    @property({type: cc.Node})
    private backGround: cc.Node = null;
    @property({type: cc.Node})
    private content: cc.Node = null;
    @property({type: cc.Label})
    private labelMatching: cc.Label = null;
    @property({type: cc.Label})
    private labelTime: cc.Label = null;
    @property({type: cc.Label})
    private labelWaitingTime: cc.Label = null;
    @property({type: cc.Node})
    private points: cc.Node = null;

    private waitingTime: number = 0;
    private countingTime: boolean = true;

    public static EVENT_MATCH_SUCCESS = "EVENT_MATCH_SUCCESS";

    public onLoad() {
        window.matchPanel = this;

        this.backGround.setContentSize(cc.winSize);
    }

    public update(dt:number) {
        if (this.countingTime) {
            this.waitingTime += dt;
            this.labelTime.string = this.timeFormatMS(this.waitingTime*1000);
        }
    }

    private timeFormatMS(millis:number) {
        let minute = Math.floor(millis / 1000 / 60);
        let second = Math.floor(millis / 1000 % 60);
        return (minute < 10 ? '0' : '') + minute + ':' + (second < 10 ? '0' : '') + second;
    }

    public renderMyInfo(nickName:string, gender:number, avatar:cc.SpriteFrame) {
        //render self info
        this.nameSelf.string = nickName;

        this.avatarSelf.spriteFrame = avatar;
        this.avatarSelf.node.setContentSize(180,180);

        if (gender == 2) {
            this.frameSelf.spriteFrame = this.frameGirl;
            this.genderSelf.spriteFrame = this.genderGirl;
        } else {
            this.frameSelf.spriteFrame = this.frameBoy;
            this.genderSelf.spriteFrame = this.genderBoy;
        }

        //rendere other style according to self style
        if (gender == 2) {
            this.frameOther.spriteFrame = this.frameBoy;
            this.genderOther.spriteFrame = this.genderBoy;
            this.points.children.forEach((child:cc.Node) => {
                child.color = cc.color(30, 144, 255, 255);
            });
        } else {
            this.frameOther.spriteFrame = this.frameGirl;
            this.genderOther.spriteFrame = this.genderGirl;
            this.points.children.forEach((child:cc.Node) => {
                child.color = cc.color(255, 105, 180, 255);
            });
        }
    }

    public renderOtherInfo(nickName:string, gender:number, avatar:cc.SpriteFrame) {
        //render other info
        this.nameOther.string = nickName;

        this.avatarOther.spriteFrame = avatar;
        this.avatarOther.node.setContentSize(180,180);

        if (gender == 2) {
            this.frameOther.spriteFrame = this.frameGirl;
            this.genderOther.spriteFrame = this.genderGirl;
        } else {
            this.frameOther.spriteFrame = this.frameBoy;
            this.genderOther.spriteFrame = this.genderBoy;
        }

        this.countingTime = false;

        this.points.destroy();

        this.labelMatching.string = "匹配完成";
        this.meteorLine.play("MeteorLine");
        this.labelTime.node.destroy();
        this.labelWaitingTime.node.destroy();
        cc.audioEngine.playEffect(this.matchSuccess, false);

        this.content.runAction(cc.sequence(
            cc.delayTime(2),
            cc.fadeOut(1),
            cc.callFunc(() => {
                this.node.emit(MatchPanel.EVENT_MATCH_SUCCESS);
                this.backGround.runAction(cc.sequence(
                    cc.fadeOut(0.5),
                    cc.callFunc(()=>{
                        this.node.destroy();
                    })
                ));
            })
        ));
    }
}