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

export class Exercises {
    data;

    images;

    indexBgColor;

    index: number;

    bg: ShapeRect;

    answer: ShapeRect;

    answerLabel;

    scaleX = 1;

    scaleY = 1;

    indexLabel: Label;

    indexLabelBg: ShapeCircle;

    answered = false;

    showed = false;

    underline : Line;

    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 w = 1280 * this.scaleX;
        let h = 140 * this.scaleY;

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

        this.bg.setSize(w, h);
    }

    initBg() {

        const bg = new ShapeRect();

        bg.alpha = 0;
        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;
        indexBg.y = r + 43 * this.scaleY;
        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.width / 2 + this.indexLabelBg.x;

        let y = 0;

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


    }


    getAnswerView(answerData) {


        const text = new RichText();
        text.fontColor = "#363333";
        text.fontSize = 48;
        text.fontName = "MMB";
        text.text = this.data.val;
        text.disH = 20 * this.scaleX;
        text.width = 1056 * this.scaleX;
        
        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.x = 0;
        bg.addChild(text);

        return bg;
    }




    check(curLetterItem, 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;
        }

        if (!curLetterItem) {
            return false;
        }


        let rect = this.answer.getBoundingBox();

        let width = 60 * this.scaleX;

        let x = this.answerLabel.linePos.x * this.scaleX;

        rect.x += x;
        rect.width = width;

        //console.log(rect, fillText);

        if (checkPointInRect(mx, my, rect) && curLetterItem.data.key == this.data.key) {

            this.answered = true;
            this.answerLabel.fillVal = curLetterItem.data.val.replace(/\-/g, '');
            this.answerLabel.answered = true;
            if(this.underline){
                this.underline.visible = false;
            }

            return true;
        }
        else {
            return false;
        }
    }
} 