import { text } from "@fortawesome/fontawesome-svg-core";
import { faAlignRight } from "@fortawesome/free-solid-svg-icons";
import { Listening } from "./Listening";
import { getMaxScale, getMinScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, RichText, ShapeCircle, ShapeRect, ShapeRectNew, Text, tweenChange } from "./Unit";

export class Exercises {
    data;

    images;

    indexBgColor;

    index: number;

    bgWidth : number;

    bg: ShapeRect;

    answer: ShapeRect;

    answerLabel: RichText;

    scaleX = 1;

    scaleY = 1;

    indexLabel: Label;

    indexLabelBg: ShapeCircle;

    pic: MySprite;

    answered = false;

    showed = false;

    underline: Line;

    audioPos = {x:0, y :0};

    circle : MySprite;

    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.initExercises();

        let h = 140 * this.scaleY;

        h = this.answer.height > h ? this.answer.height : h;

        this.bg.setSize(this.bgWidth, h);

        this.answer.y = (h - this.answer.height) / 2;

        this.indexLabelBg.y = this.answer.y + this.indexLabelBg.radius;

        
        let labelH = (this.answerLabel.fontSize) * this.scaleY;
        
        if(this.pic){
            this.pic.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
            this.audioPos.x = this.pic.x + this.pic.getBoundingBox().width / 2 + 3 * this.scaleX;
            this.audioPos.y = this.pic.y;
        }
        else{
            
            this.audioPos.x = this.answer.x + this.answerLabel.endPos.offX * this.scaleX + 3 * this.scaleX;
            this.audioPos.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
        }

        
    }

    initBg() {

        const bg = new ShapeRect();
        bg.fillColor = "#dbd0e7";
        bg.alpha = 1;
        this.bg = bg;
    }

    initIndex() {
        let indexBg = new ShapeCircle();
        let r = 20 * this.scaleX;
        indexBg.alpha = 1;
        indexBg.fillColor = "#763c92";
        indexBg.setRadius(r);
        indexBg.x = 56 * this.scaleX + r;
        this.bg.addChild(indexBg);
        this.indexLabelBg = indexBg;


        let index = new Label();
        index.text = this.data.index + "";
        index.textAlign = 'center';
        index.fontSize = 36;
        index.fontName = "TCB";
        index.fontColor = "#ffffff";
        index.setScaleXY(this.scaleX);
        index.refreshSize();
        index.x = 0;
        index.y = 0;
        indexBg.addChild(index);
        this.indexLabel = index;
    }

    initExercises() {

        let startX = 17 * this.scaleX + this.indexLabelBg.radius + this.indexLabelBg.x;

        let answer = this.getAnswerView(this.data);
        answer.x = startX;
        this.answer = answer;
        this.bg.addChild(answer);

        let mH = 100 * this.scaleY;
        let mW = 100 * this.scaleX;


        if(this.data.picUrl){
            const pic = new MySprite();
            pic.init(this.images.get(this.data.picUrl));
            let scale = getMinScale(pic,mW, mH);
            scale = Math.floor(scale * 100) / 100;
            pic.setScaleXY(scale > this.scaleX ? this.scaleX : scale);
            pic.x = answer.x + this.answerLabel.endPos.offX * this.scaleX + pic.getBoundingBox().width / 2;
            
            this.pic = pic;
            this.bg.addChild(pic);
        }   
    }


    getAnswerView(data) {

        const getTextArr = () => {
            let textArr = [];

            let from = data.answerArr[0].from;

            let to = data.answerArr[0].to;

            let flag = 'R';

            for (let i = 0; i < data.letterArr.length; ++i) {
                let text = new Text();
                text.val = data.letterArr[i].val;
                text.fontColor = data.letterArr[i].fontColor;

                if (i >= from && i <= to) {
                    text.ext01 = flag;
                }



                if (text.val == '/') {
                    text.fontColor = '#af62d4';
                    text.bold = true;
                }

                if (data.letterArr[i].bold == '1') {
                    text.bold = true;
                }
                textArr.push(text);
            }



            return textArr;
        }

        const text = new RichText();
        text.fontColor = "#363333";
        text.fontSize = 42;
        text.fontName = "GOTHIC";
        text.boldFontName = 'GOTHICB';
        text.textArr = getTextArr();
        text.disH = 20;
        text.maxWidth = 1056;

        text.setScaleXY(this.scaleX);
        text.refreshSize();
        this.answerLabel = text;


        const bg = new ShapeRect();
        bg.setSize(text.getBoundingBox().width, text.getBoundingBox().height);
        bg.fillColor = "#432300"
        bg.alpha = 0;

        text.y = bg.height / 2 - text.disH / 2;
        text.x = 0;
        bg.addChild(text);

        return bg;
    }



    check(mx, my) {

        const checkPointInRect = (x, y, rect) => {
            if (x >= rect.x && x <= rect.x + rect.width) {
                if (y >= rect.y && y <= rect.y + rect.height) {
                    return true;
                }
            }
            return false;
        }

        let rect = this.answer.getBoundingBox();

        let textArr = this.answerLabel.textArr;

        rect.width = 0;

        let offsetX = 0;

        let offsetY = 0;

        let start;

        let h = (this.answerLabel.fontSize) * this.scaleY;

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

            if (textArr[i].ext01 == 'R') {
                start = i;
                offsetX = textArr[i].x;
                break;
            }
        }

        for (let i = start; i < textArr.length; ++i) {

            if (textArr[i].ext01 == 'R') {
                rect.width += textArr[i].width;
                offsetY = textArr[i].y;
            }

        }

        rect.y += offsetY * this.scaleY;
        rect.x += offsetX * this.scaleX;
        rect.width = rect.width * this.scaleX;

        if (!checkPointInRect(mx, my, rect)) {
            return false;
        }

        const circle = new MySprite();
        circle.init(this.images.get('circle'));
        circle.scaleY = this.scaleY;
        circle.scaleX = (rect.width + 30* this.scaleX) / circle.width;
        circle.x = this.answer.x + offsetX * this.scaleY + rect.width / 2;
        circle.y = this.answer.y + offsetY * this.scaleY + h / 2;
        this.circle = circle;
        this.bg.addChild(circle);

        this.answered = true;

        return true;
    }

}