import { getMaxScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, ShapeCircle, ShapeRect, tweenChange } from "./Unit";

export class Exercises {
    data;

    images;

    indexBgColor;

    index: number;

    bg: ShapeRect;

    closePic;

    overturnPic;

    bigCard : ShapeRect;

    leftAnswer;

    rightAnswer;

    frontCard : ShapeRect;

    backCard :ShapeRect;

    answerLabel: Label2;

    showLetterArr: Array<Label> = [];

    scaleX = 1;

    scaleY = 1;

    indexLabel: Label;

    indexLabelBg: ShapeCircle;

    canClick = true;

    canClickCard = false;

    showed = false;

    curCard;

    init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {

        this.images = images;

        this.data = data;

        this.scaleX = scaleX;

        this.scaleY = scaleY;

        this.indexBgColor = indexBgColor;

        this.initBg();

        this.initIndex();

        this.initCard();
    }

    initBg() {
        let width = 500 * this.scaleY;

        let height = 270 * this.scaleX;

        const bg = new ShapeRect();
        bg.setSize(width, height);
        bg.fillColor = "#ffffff";
        bg.setShadow(0, 2, 4, "rgba(0, 0, 0, 0.5)");
        this.bg = bg;

        let maxW = 400 * this.scaleX;

        let maxH = 230 * this.scaleY;

        const pic = new MySprite();
        pic.init(this.images.get(this.data.picUrl));
        pic.x = width / 2;
        pic.y = height / 2;
        bg.addChild(pic);

        let mScale = getMaxScale(pic, maxW, maxH);
        pic.setScaleXY(mScale);
    }

    initIndex() {
        let indexBg = new ShapeCircle();
        let r = 17.5 * this.scaleX;
        indexBg.setRadius(r);
        indexBg.fillColor = "#cddce4";
        indexBg.x = this.bg.width - 16 * this.scaleX - r;
        indexBg.y = 16 * this.scaleY + r;
        indexBg.setShadow(0, 1, 3, "rgba(0, 0, 0, 0.5)");
        this.bg.addChild(indexBg);
        this.indexLabelBg = indexBg;

        let index = new Label();
        index.text = this.index + "";
        index.textAlign = 'center';
        index.fontSize = 36;
        index.fontName = "GOTHICB";
        index.fontColor = "#567790";     
        index.setScaleXY(this.scaleX);
        index.refreshSize();
        index.x = 0;
        index.y = 0 +4 * this.scaleY;
        indexBg.addChild(index);
        index.alpha = 1;
        this.indexLabel = index;
    }

    initCard(){

        let w = 1000 * this.scaleX;

        let h = 600 * this.scaleY

        const bigCard = new ShapeRect();
        bigCard.setSize(w, h);
        bigCard.fillColor = "#ffffff";
        bigCard.setShadow(0, 10,20, "rgba(0, 0, 0, 0.5)");
        this.bigCard = bigCard;

        this.initAnswer();

        this.initBackCard();

        this.curCard = this.frontCard;

        this.closePic = this.getColsePic(bigCard);

        this.overturnPic = this.getOverturnPic(bigCard);
        

        bigCard.setScaleXY(0);
    }

    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;

        closePic.y = 0;
        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 - 20 * this.scaleX - overturnPic.getBoundingBox().width / 2;

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

        return overturnPic;
    }

    initAnswer() {

        let frontCard = new ShapeRect();
        frontCard.setSize(this.bigCard.width, this.bigCard.height);
        frontCard.alpha = 0;
        frontCard.x = 0;
        frontCard.y = 0;
        this.frontCard = frontCard;
        this.bigCard.addChild(frontCard);

        let dW = 25 * this.scaleX;

        let w = 386 * this.scaleX;

        let startX = (this.bigCard.width -  (dW + w * 2)) / 2;

        let leftAnswer = new ShapeRect();
        this.getAnswerView(leftAnswer, this.data.leftAnswer);
        leftAnswer.x = startX;
        this.leftAnswer = leftAnswer;
        frontCard.addChild(leftAnswer);

        let rightAnswer = new ShapeRect();
        this.getAnswerView(rightAnswer, this.data.rightAnswer);
        rightAnswer.x = startX + w + dW;
        this.rightAnswer = rightAnswer;
        frontCard.addChild(rightAnswer);
    }

    getTextView(letterArr){

        const getLabelText = (letter) => {
            const text = new LabelText();
            text.val = letter.val;
            if (letter.isFill == '1') {
                text.fontColor = "#c8161d";
            }
            else {
                text.fontColor = "#000000";
            }
            text.underLine = false;

            return text;
        }


        let labelTextArr = [];

        for (let i = 0; i < letterArr.length; ++i) {

            var letter = letterArr[i];

            let label = getLabelText(letter);

            labelTextArr.push(label);
        }

        const answer = new Label2();
        answer.textArr = labelTextArr;
        answer.fontSize = 88;
        answer.fontName = "MMB";
        answer.setScaleXY(this.scaleX);
        answer.refreshSize();

        return answer;
    }

    getAnswerView(answerBg, answerData) {

        let w = 386 * this.scaleX;
        let h = 514 * this.scaleY;

        answerBg.setSize(w, h);
        answerBg.fillColor = "#e5edf2";
        answerBg.y = (this.bigCard.height - h) / 2;

        let maxH = 257 * this.scaleY;
        let maxW = w;

        const pic = new MySprite();
        pic.init(this.images.get(answerData.picUrl));
        let scale = Math.min(maxW / pic.width, maxH / pic.height);

        //如果小于1,则缩放图片
        if (scale < 1) {
            pic.setScaleXY(scale);
        }
        answerBg.addChild(pic);
        pic.x = w / 2;

        if(answerData.letterArr && answerData.letterArr.length > 0){
            pic.y = h / 2 - 195 * this.scaleY + 257 * this.scaleY / 2;

            const line = new ShapeRect();
            line.setSize(180 * this.scaleX, 7 * this.scaleY);
            line.fillColor = "#949494";
            line.x = (w - line.width ) / 2;
            line.y = h - line.height - 42 * this.scaleY;
            answerBg.addChild(line);
            answerBg.line = line;

            let text = this.getTextView(answerData.letterArr);
            text.x = (w - text.getBoundingBox().width) / 2;
            text.y = h / 2 - 195 * this.scaleY + 325 * this.scaleY + text.getBoundingBox().height / 2;
            text.alpha = 0;
            answerBg.addChild(text);
            answerBg.text = text;
        }
        else{
            pic.y = h / 2;
        }
    }

    initBackCard(){

        let w = 960 * this.scaleX;

        let h = 560 * this.scaleY;

        let backCard = new ShapeRect();
        backCard.setSize(w, h);
        backCard.alpha = 0;
        backCard.visible = false;
        backCard.x = (this.bigCard.width - w)/ 2;
        backCard.y = (this.bigCard.height - h) / 2;
        this.backCard = backCard;
        this.bigCard.addChild(backCard);

        const pic = new MySprite();
        pic.init(this.images.get(this.data.card.picUrl));
        pic.x = w / 2;
        pic.y = h / 2;

        let scale = Math.min(w / pic.width, h / pic.height);

        //如果小于1,则缩放图片
        if (scale < 1) {
            pic.setScaleXY(scale);
        }
        
        backCard.addChild(pic);
    }


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

        if (this.showed) {
            return;
        }

        this.bigCard.x = this.bg.x;

        this.bigCard.y = this.bg.y;

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

            if (callback) {
                callback();
            }
        });
    }


    overturn(scaleX: number, callback = null) {

        if (!this.canClick) {
            return;
        }

        if (!this.canClickCard) {
            return;
        }

        let tempScaleX = 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.bigCard, { scaleX: 0 }, 0.3, () => {

            this.curCard.visible = false;

            tweenChange(this.bigCard, { scaleX: tempScaleX }, 0.3, () => {

                if(this.curCard == this.frontCard){
                    this.backCard.visible = true;
                    this.curCard = this.backCard;
                }
                else{
                    this.frontCard.visible = true;
                    this.curCard = this.frontCard;
                }

                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;

        let toX = this.bg.x;

        let toY = this.bg.y;

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

            if (this.backCard.visible) {
                this.frontCard.visible = true;
                this.backCard.visible = false;
            }

            if(this.leftAnswer.line){
                this.leftAnswer.line.alpha = 1;

                this.leftAnswer.text.alpha = 0;
            }
           
            if(this.rightAnswer.line){
                this.rightAnswer.line.alpha = 1;

                this.rightAnswer.text.alpha = 0;
            }

            this.curCard = this.frontCard;

            callback && callback();
        });

    }

} 