import {
    Label,
    MySprite, ShapeRectNew,
    ShapeCircle,
    tweenChange,
    ShapeRect,
    Lable2,
    LableText,
    setFontSize
} from './Unit';

import {
    playAudio,
    pauseAudio

} from './AudioUtil';

export class Exercises {

    audio;

    images;

    exercisesData;

    bg;

    textLabel : Lable2;

    bigCard;

    cardBg;

    contentBg1;

    closePic;

    overturnPic;

    contentBg2;

    canClick = true;

    canClickCard = false;

    showed = false;

    curCard;

    showBg;

    scaleX = 1;

    scaleY = 1;

    skin;

    constructor(exercisesData, images) {
        this.exercisesData = exercisesData;

        this.images = images;
    }

    init(skin, scaleX = 1, scaleY = 1) {

        this.scaleX = scaleX;

        this.scaleY = scaleY;

        this.skin = skin;

        let type = '1';

        if (this.exercisesData.index % 2 == 0) {
            type = '2';
        }

        let outLineColor = "#aacce9";

        if (skin == 'A') {
            this.initA(scaleX, scaleY, type);
            outLineColor = "#fbd8c1";
        }
        else {
            this.initB(scaleX, scaleY, type);
        }


        let width = 1021 * scaleX;
        let height = 399 * scaleY;
       
        const cardBg = new MySprite();
        cardBg.init(this.images.get('box'));
        cardBg.scaleX = scaleX;
        cardBg.scaleY = scaleY;
        cardBg.alpha = 0;
        this.cardBg = cardBg;

        const bigCard1 = new ShapeRectNew();
        bigCard1.setOutLine(outLineColor, 20 * scaleY);
        bigCard1.setSize(width, height, 25 * scaleY);
        bigCard1.x = -width / 2;
        bigCard1.y = -height / 2;
        bigCard1.fillColor = "#ffffff";
        bigCard1.setShadow(0, 10 * this.scaleY , 20, 'rgba(0, 0, 0, 0.5)');
        cardBg.addChild(bigCard1);

        const bigCard = new ShapeRectNew();
        bigCard.setOutLine(outLineColor, 20 * scaleY);
        bigCard.setSize(width, height, 25 * scaleY);
        bigCard.x = -width / 2;
        bigCard.y = -height / 2;
        bigCard.fillColor = "#ffffff";
        this.bigCard = bigCard;
        cardBg.addChild(bigCard);

        this.initBigCard1(bigCard, skin);

        this.initBigCard2(bigCard, skin);

        //默认显示内容1
        this.showBg = this.contentBg1;

        this.closePic = this.getColsePic(bigCard);

        this.overturnPic = this.getOverturnPic(bigCard);

        cardBg.setScaleXY(0);
    }

    /**
     * 设置x坐标
     * @param textLabel 
     * @param totalWidth
     * @param skin 
     */
    private resetX(textLabel, totalWidth, skin){

        var startX = 0;

        if(skin == 'B'){
            startX = (this.bg.width - totalWidth) / 2;
        }
        else{
            startX = this.scaleX * 100;
        }

        textLabel.x = startX;
    }

    private addText(bg: ShapeRectNew, skin) {

        let totalWidth = 0;

        let text = new Lable2();
        text.fontName = "GOTHIC";

        let fontSize = 48;
        if (skin == 'B'){
            fontSize = 48;
        }
        else{
            fontSize = 56;
        }
        text.fontSize = fontSize;  

        let textArr = new Array<LableText>();
        text.textArr = textArr;

        let maxWidth = 0;

        for (let i = 0; i < this.exercisesData.letters.length; ++i) {

            var letter = this.exercisesData.letters[i];

            let labelText = new LableText();
            labelText.val = letter.val;

            let fontColor = "";       

            if (skin == 'B') {
                if (letter.isColor === '0') {
                    fontColor = "#717071";
                }
                else {
                    fontColor = "#cc2a2e";
                }
                
                maxWidth = 487 * this.scaleX;
            }
            else {
               
                if (letter.isColor === '0') {
                    fontColor = "#000000";
                }
                else {
                    fontColor = "#cc2a2e";
                }

                maxWidth = 420 * this.scaleX;
            }
            labelText.fontColor = fontColor;
                 
            textArr.push(labelText);
        }

        text.scaleX = this.scaleX;
        text.scaleY = this.scaleY;
        
        text.y = bg.height / 2;
        
        bg.addChild(text);

        setFontSize(maxWidth, text);
        text.refreshSize();
        totalWidth = text.getBoundingBox().width;
        this.textLabel = text;

        this.resetX(text, totalWidth, this.skin);
    }

    private initB(scaleX = 1, scaleY = 1, type) {

        const getColor = (type) => {
            if (type == '1') {
                return { outLine: '#53748f', index: '#f5af80' };
            }
            else {
                return { outLine: '#aacce9', index: '#f5af80' };
            }
        };

        let color = getColor(type);

        let width = 560 * scaleX;
        let height = 96 * scaleY;

        const bg = new ShapeRectNew();
        bg.setOutLine(color.outLine, 8 * scaleY);
        bg.setSize(width, height, 48 * scaleY);
        this.bg = bg;



        const indexBg = new ShapeCircle();
        indexBg.setRadius(30 * scaleX);
        indexBg.fillColor = color.index;
        indexBg.x = width / 2;
        indexBg.y = -(indexBg.height / 2 - 10 * scaleY);
        bg.addChild(indexBg);

        //顺序
        const index = new Label();
        index.text = this.exercisesData.index;
        index.textAlign = 'middle';
        index.fontSize = 48;
        index.fontName = "BRLNSDB";
        index.fontColor = "#FFFFFF";
        index.scaleX = this.scaleX;
        index.scaleY = this.scaleY;
        index.setMaxSize(indexBg.width);
        index.x = - index.getBoundingBox().width / 2;
        indexBg.addChild(index);

        //内容
        this.addText(bg, this.skin);
    }

    private initA(scaleX = 1, scaleY = 1, type) {

        const getColor = (type) => {
            if (type == '1') {
                return { fillColor: '#E5E3E4', index: '#fbd8c1' };
            }
            else {
                return { fillColor: '#E5E3E4', index: '#fbd8c1' };
            }
        };

        let color = getColor(type);

        let width = 550 * scaleX;
        let height = 80 * scaleY;

        const bg = new ShapeRectNew();
        bg.fillColor = color.fillColor;
        bg.setSize(width, height, 40 * scaleY);
        this.bg = bg;

        const indexBg = new ShapeCircle();
        indexBg.setRadius(44 * scaleX);
        indexBg.fillColor = color.index;
        indexBg.x = 44 * scaleX;
        indexBg.y = height / 2;
        bg.addChild(indexBg);

        //顺序
        const index = new Label();
        index.text = this.exercisesData.index;
        index.textAlign = 'middle';
        index.fontSize = 64;
        index.fontName = "TCB";
        index.fontColor = '#ec6101';
        index.setScaleXY(this.scaleX);
        index.setMaxSize(45 * scaleX);
        index.x = indexBg.x - index.getBoundingBox().width / 2;
        index.y = height / 2;
        bg.addChild(index);

        //内容
        this.addText(bg, this.skin);
    }

    private getContentBg(parent) {
        let width = parent.width - 40 * parent.scaleX;

        let height = parent.height - 40 * parent.scaleY;

        const constantBg = new ShapeRect();
        constantBg.setSize(width, height);
        constantBg.fillColor = '#ffffff';
        constantBg.alpha = 1;
        constantBg.visible = false;
        
        constantBg.x = 20 * parent.scaleX;
        constantBg.y = 20 * parent.scaleY;
        parent.addChild(constantBg);

        return constantBg;
    }


    private initBigCard1(parent, skin) {

        const addText = (bg: ShapeRect, skin, fontSize) => {

            let text = new Lable2();
            text.fontName = "GOTHICB";

            text.fontSize = fontSize;

            let textArr = new Array<LableText>();
            text.textArr = textArr;

            for (let i = 0; i < this.exercisesData.letters.length; ++i) {

                var letter = this.exercisesData.letters[i];

                let labelText = new LableText();
                labelText.val = letter.val;

                let fontColor = "";

                if (skin == 'B') {
                    if (letter.isColor === '0') {
                        fontColor = "#717071";
                    }
                    else {
                        fontColor = "#cc2a2e";
                    }

                }
                else {

                    if (letter.isColor === '0') {
                        fontColor = "#000000";
                    }
                    else {
                        fontColor = "#cc2a2e";
                    }
                }
                labelText.fontColor = fontColor;

                textArr.push(labelText);
            }
            text.setScaleXY(this.scaleX);
            text.setMaxSize(960 * this.scaleX);
            text.refreshSize();
            text.y = bg.height / 2;
            let totalWidth = text.getBoundingBox().width;
            text.x = (bg.width - totalWidth) / 2;


            bg.addChild(text);

        }

        const contentBg = this.getContentBg(parent);
        contentBg.childDepandAlpha = true;
        contentBg.visible = true;
        this.contentBg1 = contentBg;

        //内容
        addText(contentBg, skin, 96)

    }

    private initBigCard2(parent, skin) {

        const addText = (bg: ShapeRect, skin, fontSize) => {

            let text = new Lable2();
            text.fontName = "GOTHICB";

            text.fontSize = fontSize;

            let textArr = new Array<LableText>();
            text.textArr = textArr;

            for (let i = 0; i < this.exercisesData.letters.length; ++i) {

                var letter = this.exercisesData.letters[i];

                let labelText = new LableText();
                labelText.val = letter.val;

                let fontColor = "";
                if (skin == 'B') {
                    if (letter.isColor === '0') {
                        fontColor = "#717071";
                    }
                    else {
                        fontColor = "#cc2a2e";
                    }
                }
                else {
                    if (letter.isColor === '0') {
                        fontColor = "#000000";
                    }
                    else {
                        fontColor = "#cc2a2e";
                    }
                }
                
                labelText.fontColor = fontColor;

                textArr.push(labelText);
            }
            text.setScaleXY(this.scaleX);
            text.setMaxSize(800 * this.scaleX);
            text.refreshSize();
            text.y = bg.height - text.getBoundingBox().height / 2 - 17 * this.scaleY;
            let totalWidth = text.getBoundingBox().width;
            text.x = (bg.width - totalWidth) / 2;


            bg.addChild(text);

            var sHeight = text.getBoundingBox().height;

            let height = text.height;

            return { height: height, sHeight: sHeight };
        }

        const contentBg = this.getContentBg(parent);
        contentBg.childDepandAlpha = true;
        this.contentBg2 = contentBg;

        let width = contentBg.width;

        let height = contentBg.height;

        //内容
        let textHeight = addText(contentBg, skin, 72);

        //图片最大高度和宽度
        let maxWidth = width - 40 * this.scaleX;
        let maxHeight = height - 80 * this.scaleY - textHeight.height;

        const contentPic = new MySprite();
        contentPic.init(this.images.get(this.exercisesData.pic_url));
        let scale = Math.min(maxHeight / contentPic.height, maxWidth / contentPic.width);

        //如果小于1,则缩放图片
        if (scale < 1) {
            contentPic.setScaleXY(scale);
        }
        
        contentPic.x = width / 2;
        contentPic.y = 39 * this.scaleY  + maxHeight / 2;
        contentBg.addChild(contentPic);
    }

    private getColsePic(parent) {
        const closePic = new MySprite();
        closePic.init(this.images.get('close'));
        closePic.scaleX = this.scaleX;
        closePic.scaleY = this.scaleY;

        closePic.x = parent.width - 5 * this.scaleX;

        closePic.y = 0 + 5 * this.scaleY;
        parent.addChild(closePic);

        return closePic;
    }

    private getOverturnPic(parent) {
        const overturnPic = new MySprite();
        overturnPic.init(this.images.get('overturn'));
        overturnPic.scaleX = this.scaleX;
        overturnPic.scaleY = this.scaleY;

        overturnPic.x = parent.width - 18 * this.scaleX - overturnPic.getBoundingBox().width / 2;

        overturnPic.y = parent.height - 15 * this.scaleY - overturnPic.getBoundingBox().height / 2;
        parent.addChild(overturnPic);

        return overturnPic;
    }

    /**
     * 显示大卡片
     */
    showBigCard(toX: number, toY: number, callback = null) {

        if (this.showed) {
            return;
        }

        this.cardBg.x = this.bg.x;

        this.cardBg.y = this.bg.y;

        tweenChange(this.cardBg, { scaleX: 1, scaleY: 1, x: toX, y: toY }, 0.5, () => {console.log(this.bigCard.width);
            this.canClickCard = true;
            this.showed = true;
            if (callback) {
                callback();
            }
        });
    }


    overturn(scaleX: number, callback = null) {

        if (!this.canClick) {
            return;
        }

        if (!this.canClickCard) {
            return;
        }

        let w = scaleX;

        this.canClickCard = false;

        let tScaleX = this.closePic.scaleX;

        let tScaleY = this.closePic.scaleY;

        tweenChange(this.closePic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.1, () => {
            tweenChange(this.closePic, { scaleX: 0, scaleY: 0 }, 0.4, () => {

            });
        });

        tweenChange(this.overturnPic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.1, () => {
            tweenChange(this.overturnPic, { scaleX: 0, scaleY: 0 }, 0.4, () => {

            });
        });


        tweenChange(this.showBg, { alpha: 0 }, 0.5, () => {

            tweenChange(this.cardBg, { scaleX: 0 }, 0.3, () => {

                this.contentBg2.visible = !this.contentBg2.visible;

                this.contentBg2.visible ? this.showBg = this.contentBg2 : this.showBg = this.contentBg1;

                this.showBg.alpha = 0;

                tweenChange(this.cardBg, { scaleX: w }, 0.3, () => {

                    tweenChange(this.showBg, { alpha: 1 }, 0.5, () => {

                    });
                    tweenChange(this.closePic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.4, () => {
                        tweenChange(this.closePic, { scaleX: tScaleX, scaleY: tScaleY }, 0.1, () => {

                        });
                    });

                    tweenChange(this.overturnPic, { scaleX: tScaleX * 1.1, scaleY: tScaleY * 1.1 }, 0.4, () => {
                        tweenChange(this.overturnPic, { scaleX: tScaleX, scaleY: tScaleY }, 0.1, () => {
                            this.canClickCard = true;

                            callback && callback();
                        });
                    });
                });

            });
        });


    }

    close(callback = null) {

        this.canClickCard = false;

        this.showed = false;

        this.pasueAudio();

        let toX = this.bg.x;

        let toY = this.bg.y;

        tweenChange(this.cardBg, { scaleX: 0, scaleY: 0, x: toX, y: toY }, 0.5, () => {

            if (this.contentBg2.visible) {
                this.contentBg1.visible = true;
                this.contentBg2.visible = false;
            }

            this.contentBg1.alpha = 1;

            callback && callback();
        });

    }

    resetText(fontSize, skin = 'A') {

        var totalWidth = 0
        
        this.textLabel.fontSize = fontSize;
        this.textLabel.refreshSize();
        totalWidth = this.textLabel.getBoundingBox().width;

        this.resetX(this.textLabel, totalWidth, skin);
    }

    playAudio(callback = null) {
        playAudio(this.audio, true, callback);

        return this.audio;
    }

    pasueAudio(callback = null) {
        pauseAudio(this.audio, true, callback)
    }
}


/**
* 获取缺省的练习题内容
*/
export function getDefaultExercisesItem() {
    let exercises = {
        text: "This is apple",
        pic_url: "",
        audio_url: "",
        index: 0,
        letters:[]
    }

    exercises.letters.push(getDefaultLetter())

    return exercises;
}

/**
   * 获取默认的字母
   */
  export function getDefaultLetter(){
    let letter = {
      val:'This is apple',
      isColor:'0'
    };

    return letter;
  }