import { Label, Label2, LabelText, MySprite, ShapeCircle, ShapeRect } from "./Unit";

export class Exercises {
    data;

    images;

    indexBgColor;

    index: number;

    bg: ShapeRect;

    answer1: ShapeRect;

    answer2: ShapeRect;

    scaleX = 1;

    scaleY = 1;

    answered: Boolean = false;

    rightPic: 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.initAnswer();
    }

    initBg() {
        let height = 48 * this.scaleY;

        let width = 580 * this.scaleX;

        const bg = new ShapeRect();
        bg.setSize(width, height);
        bg.alpha = 0;
        this.bg = bg;
    }

    initIndex(){
        let indexBg = new ShapeCircle();
        indexBg.setRadius(23 * this.scaleX);
        indexBg.fillColor = this.indexBgColor;
        indexBg.x = indexBg.width / 2;
        indexBg.y = this.bg.height / 2;
        indexBg.alpha = 0.7;
        this.bg.addChild(indexBg);

        let index = new Label();
        index.text = this.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);
    }

    initAnswer(){

        let startX = 46 * this.scaleX +  7 * this.scaleX;

        let answer1 = this.getAnswerView(this.data.answer1);
        answer1.x = startX;
        this.answer1 = answer1;

        let answer2 = this.getAnswerView(this.data.answer2);
        answer2.x = startX + 253 * this.scaleX;
        this.answer2 = answer2;

        const rightPic = new MySprite();
        rightPic.init(this.images.get('circle'));
        rightPic.setScaleXY(this.scaleX);
        rightPic.alpha = 0;
        rightPic.y = this.bg.height / 2;
        this.rightPic = rightPic;

        if(this.data.answerIndex == '1'){
            rightPic.x = answer1.x + answer1.width / 2;
        }
        else if(this.data.answerIndex == '2'){
            rightPic.x = answer2.x + answer2.width / 2;
        }

        this.bg.addChild(rightPic);
    }

    getAnswerView(answerData){
        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 < answerData.letterArr.length; ++i) {

            var letter = answerData.letterArr[i];

            let label = getLabelText(letter);

            labelTextArr.push(label);           
        }

        const answer = new Label2();
        answer.textArr = labelTextArr;
        answer.fontSize = 48;
        answer.fontName = "MMB";
        answer.setScaleXY(this.scaleX);
        answer.refreshSize();
        
        const answerBg = new ShapeRect();
        answerBg.alpha = 0;
        answerBg.setSize(answer.getBoundingBox().width, answer.getBoundingBox().height);
        answerBg.y = (this.bg.height - answerBg.height) / 2;

        answer.y = answerBg.height / 2;
        answer.x = 0;
        answerBg.addChild(answer);

        this.bg.addChild(answerBg);
     

        return answerBg;
    }

    checkAnswer(answerIndex) {

        if(this.data.answerIndex == answerIndex){
            this.rightPic.alpha = 1;

            this.answered = true;

            return true;
        }

        return false;
    }
} 