cc.Class({
    extends: cc.Component,

    properties: {
        pfbLetter: cc.Prefab,
        dragonBone: dragonBones.ArmatureDisplay,
        audMove: cc.AudioClip,
        audRight: cc.AudioClip,
        audWrong: cc.AudioClip,
        audClick: cc.AudioClip,
        audOver: cc.AudioClip,
    },

    onLoad() {
        this.layerLetters = this.node.getChildByName('lettters');
        this.layerRightLetters = cc.find('wrong/rightLetters/layout', this.node);
        this.nodBtnLast = this.node.getChildByName('btnLast');
        this.nodBtnReplay = this.node.getChildByName('btnReplay');
        this.nodBtnNext = this.node.getChildByName('btnNext');
        this.nodLabWhite = this.node.getChildByName('labWhite');
        this.particle = this.node.getChildByName('particle');
    },

    setData(data, index, isLeft, scene) {
        this.scene = scene;
        this.data = data;
        this.index = index;
        this.isLeft = isLeft;
        this.item = this.data.dataArray[this.index];
        this.initQuestion();
        this.loadDragonBone();
        this.initLetters();
        this.playerResult();
        this.initBtns();
    },

    initQuestion() {
        this.nodLabWhite.active = false;
        let target = this.scene.labWhite.node;
        let pos = target.parent.convertToWorldSpaceAR(target.position);
        pos = this.nodLabWhite.parent.convertToNodeSpaceAR(pos);
        this.nodLabWhite.position = pos;
        this.nodLabWhite.getComponent(cc.Label).string = this.item.letter.toUpperCase() + ' ' + this.item.letter.toLowerCase();
    },

    initBtns() {
        if (this.index == 0) {
            this.nodBtnLast.getComponent(cc.Button).interactable = false;
        }
        if (this.index == this.data.dataArray.length - 1) {
            this.nodBtnNext.getComponent(cc.Button).interactable = false;
        }
    },

    loadDragonBone() {
        this.dragonBone.dragonAtlasAsset = null;
        this.dragonBone.dragonAsset = null;
        this.dragonBone.armatureName = '';
        var imageUrl = this.item.tex_png;
        var skeUrl = this.item.ske_json;
        var atlasUrl = this.item.tex_json;
        // imageUrl = 'http://127.0.0.1/walkingfish_tex.png';
        // skeUrl = 'http://127.0.0.1/walkingfish_ske.json';
        // atlasUrl = 'http://127.0.0.1/walkingfish_tex.json';

        // imageUrl = 'http://127.0.0.1/B1U5L3_page1_ani_tex.png';
        // skeUrl = 'http://127.0.0.1/B1U5L3_page1_ani_ske.json';
        // atlasUrl = 'http://127.0.0.1/B1U5L3_page1_ani_tex.json';
        cc.assetManager.loadAny([{ url: atlasUrl, ext: '.txt' }, { url: skeUrl, ext: '.txt' }], (error, assets) => {
            if (error) {
                console.log(error)
            }
            else {
                cc.assetManager.loadRemote(imageUrl, (error, texture) => {
                    if (error) {
                        console.log(error)
                    }
                    else {
                        var atlas = new dragonBones.DragonBonesAtlasAsset();
                        atlas._uuid = atlasUrl;
                        atlas.atlasJson = assets[0];
                        atlas.texture = texture;

                        var asset = new dragonBones.DragonBonesAsset();
                        asset._uuid = skeUrl;
                        asset.dragonBonesJson = assets[1];

                        this.dragonBone.dragonAtlasAsset = atlas;
                        this.dragonBone.dragonAsset = asset;
                        let data = asset._dragonBonesJsonData.armature[0];
                        if (!data) {
                            return;
                        }
                        this.dragonBone.armatureName = data.name;
                        this.animationName = data.animation[0].name;

                        this.setSpineScale(data.canvas);
                    }
                });
            }
        });

    },

    setSpineScale(size) {
        let bgWidth = 250;
        let bgHeight = 250;
        if (size.width != bgWidth || size.height != bgHeight) {
            let designScale = bgWidth / bgHeight;
            let scale = size.width / size.height;
            if (scale > designScale) {
                this.dragonBone.node.parent.scale = bgWidth / size.width;
            } else {
                this.dragonBone.node.parent.scale = bgHeight / size.height;
            }
        }
    },

    initLetters() {
        let letter = this.item.letter;
        let text = this.item.text1;
        if (!this.isLeft) {
            text = this.item.text2;
        }
        let node = cc.instantiate(this.pfbLetter);
        node.parent = this.layerLetters;
        node.getComponent('ItemLetter').setData('red', letter.toUpperCase(), 96);
        node = cc.instantiate(this.pfbLetter);
        node.parent = this.layerLetters;
        node.getComponent('ItemLetter').setData('red', ' ', 96);
        node = cc.instantiate(this.pfbLetter);
        node.parent = this.layerLetters;
        node.getComponent('ItemLetter').setData('red', letter.toLowerCase(), 96);
        node = cc.instantiate(this.pfbLetter);
        node.parent = this.layerLetters;
        node.getComponent('ItemLetter').setData('red', '  ', 96);
        node = cc.instantiate(this.pfbLetter);
        node.parent = this.layerLetters;
        node.getComponent('ItemLetter').setData('red', letter.toLowerCase(), 96);


        for (let i = 1; i < text.length; i++) {
            let node = cc.instantiate(this.pfbLetter);
            node.parent = this.layerLetters;

            let letter = text.charAt(i);
            node.getComponent('ItemLetter').setData('normal', letter, 96);
        }
        this.layerLetters.getComponent(cc.Layout).updateLayout();
    },

    playerResult() {
        this.playAudMove();
        this.getComponent(cc.Animation).play('result1');

        this.scheduleOnce(() => {
            this.nodLabWhite.active = true;
            this.playDragonBone();
            this.playAudWord(() => {
                this.playAudRight();
                this.scheduleOnce(() => {
                    this.onPlayResultDone();
                }, 1)
            });
        }, 0.5)
    },

    playDragonBone() {
        this.dragonBone.playAnimation(this.animationName, 1);
    },

    playAudMove() {
        cc.audioEngine.play(this.audMove, false, 1);
    },

    playAudWord(cb) {
        // this.item.shortAudio_url4 = 'http://127.0.0.1/iamflying.mp3'
        cc.assetManager.loadRemote(this.item.shortAudio_url4, null, (err, clip) => {
            if (err) {
                console.log(err)
                return;
            }
            let id = cc.audioEngine.play(clip, false, 1);
            let duration = cc.audioEngine.getDuration(id);
            this.scheduleOnce(() => {
                cb && cb();
            }, duration)
        });
    },

    playAudRight() {
        cc.audioEngine.play(this.audRight, false, 1);
    },

    onPlayResultDone() {
        this.playDone = true;

        if (this.checkOver()) {
            this.showOver();
        }
    },

    checkOver() {
        for (let i = 0; i < this.data.dataArray.length; i++) {
            if (!GameData.questionList[i]) {
                return false;
            }
        }
        return true;
    },

    showOver() {
        cc.audioEngine.play(this.audOver);
        this.particle.active = true;
        this.scheduleOnce(() => {
            this.particle.active = false;
        }, 4)
    },

    onBtnLast() {
        cc.audioEngine.play(this.audClick);
        if (!this.playDone) {
            return;
        }
        this.scene.onTurnLast();
        this.node.destroy();
    },
    onBtnReplay() {
        cc.audioEngine.play(this.audClick);
        if (!this.playDone) {
            return;
        }
        this.scene.onReplay();
        this.node.destroy();
    },
    onBtnNext() {
        cc.audioEngine.play(this.audClick);
        if (!this.playDone) {
            return;
        }
        this.scene.onTurnNext();
        this.node.destroy();
    },
    // update (dt) {},
});
