import {
    ShapeRect,
    MySprite,
    tweenChange,
    shake
} from './Unit';

import {
    pauseAudio,
    playAudio
} from './AudioUtil'

export class Box {

    name: string;

    /**图片框 */
    picBox: MySprite;

    picBoard: ShapeRect;

    /**文本框 */
    wordBox: MySprite;

    wordBoard: ShapeRect;

    /**框发光图片 */
    boxLightPic: MySprite;

    /**背景 */
    boxBg: ShapeRect;

    curBox;

    images = new Map();

    scaleX = 1;

    scaleY = 1;

    answer;

    inited = false;

    wrongAudio;

    rightAudio;

    showed = false;

    initX = 0;

    initY = 0;

    moveout = false;

    constructor(name, images) {
        this.images = images;
        this.name = name;
    }

    setScaleXY(scale) {
        this.scaleX = this.scaleY = scale;
    }

    init() {

        if (this.inited) {
            return;
        }

        const picBox = new MySprite();
        picBox.init(this.images.get('box_pic'));
        picBox.scaleX = this.scaleX;
        picBox.scaleY = this.scaleY;
        picBox.alpha = 0;
        this.picBox = picBox;

        const wordBox = new MySprite();
        wordBox.init(this.images.get('box_word'));
        wordBox.scaleX = this.scaleX;
        wordBox.scaleY = this.scaleY;
        wordBox.alpha = 0;
        this.wordBox = wordBox;

        const boxLight = new MySprite();
        boxLight.init(this.images.get('box_light'));
        boxLight.scaleX = this.scaleX;
        boxLight.scaleY = this.scaleY;
        boxLight.alpha = 0;
        this.boxLightPic = boxLight;


        let width = picBox.getBoundingBox().width;
        let height = picBox.getBoundingBox().height;

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

        const picBoard = new ShapeRect();
        picBoard.setSize(width, height);
        picBoard.alpha = 0;
        picBoard.x = 0;
        picBoard.y = 0;
        this.picBoard = picBoard;
        this.boxBg.addChild(picBoard);

        picBox.x = width / 2;
        picBox.y = height / 2;
        bg.addChild(picBox);


        wordBox.x = picBox.x;
        wordBox.y = picBox.y;
        bg.addChild(wordBox);

        const wordBoard = new ShapeRect();
        wordBoard.setSize(width, height);
        wordBoard.alpha = 0;
        wordBoard.x = 0;
        wordBoard.y = 0;
        this.wordBoard = wordBoard;
        this.boxBg.addChild(wordBoard);

        boxLight.x = picBox.x;
        boxLight.y = picBox.y - 20 * this.scaleY;
        bg.addChild(boxLight);

        this.inited = true;
    }


    showBox(answer, callback = null) {
        if (!answer) {
            return;
        }

        if (!this.inited) {
            this.init();
        }

        const show = () => {console.log('show answer......');
            let lastAnswer = this.answer ? this.answer : null;

            this.answer = answer;

            this.boxLightPic.alpha = 0;

            const showAnswer = () => {
                let x = (this.boxBg.width - this.answer.getWidth()) / 2;

                let y = 22 * this.scaleY;

                let sX = x;

                let sY = this.boxBg.height + this.answer.getHeight();

                if (this.answer.contentType == 'T') {
                    this.wordBoard.addChild(this.answer.bg);
                }
                else {
                    this.picBoard.addChild(this.answer.bg);
                }

                this.answer.moveIn(sX, sY, x, y, () => {

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

                this.showed = true;
            };


            if (answer.contentType == 'T') {

                if (!this.curBox) {
                    this.curBox = this.wordBox;

                    this.show(() => {
                        showAnswer();
                    });

                }
                else if (this.curBox == this.wordBox) {
                    lastAnswer.moveOut(lastAnswer.bg.x, lastAnswer.bg.y, () => {
                        this.wordBoard.removeChild(lastAnswer.bg);
                        showAnswer();

                    });

                }
                else {
                    this.hide(lastAnswer, () => {
                        this.curBox = this.wordBox;
                        this.wordBox.alpha = 1;
                        showAnswer();
                    })
                }
            }
            else {

                if (!this.curBox) {
                    this.curBox = this.picBox;
                    this.show(() => {
                        showAnswer();
                    });
                }
                else if (this.curBox == this.picBox) {
                    lastAnswer.moveOut(lastAnswer.bg.x, lastAnswer.bg.y, () => {
                        this.picBoard.removeChild(lastAnswer.bg);
                    });
                    showAnswer();
                }
                else {
                    this.hide(lastAnswer, () => {
                        this.curBox = this.picBox;
                        this.picBox.alpha = 1;
                        showAnswer();
                    })
                }
            }
        };

        if (this.moveout) {
            this.moveIn(() => {
                show();
            });
        }
        else {
            show();
        }




    }

    hide(answer, callback = null) {

        this.boxLightPic.alpha = 0;

        if (this.curBox && this.showed) {

            this.showed = false;

            if (answer) {
                answer.moveOut(answer.bg.x, answer.bg.y, () => {
                    if (answer.contentType == 'T') {
                        this.wordBoard.removeChild(answer.bg);
                    }
                    else {
                        this.picBoard.removeChild(answer.bg);
                    }

                    let tBox = this.curBox;
                    tBox.alpha = 0;

                    this.curBox = null;
                    if (callback) {
                        callback();
                    }
                });
            }
            else {
                let tBox = this.curBox;
                tBox.alpha = 0;

                this.curBox = null;
                if (callback) {
                    callback();
                }
            }

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

    show(callback = null) {
        if (this.curBox) {
            this.curBox.alpha = 1;
            if (callback) {
                callback();
            }
        }
        else {
            if (callback) {
                callback();
            }
        }
    }

    click(callback = null,wrongCallback = null) {

        if (!this.showed) {
            return;
        }

        if (!this.answer) {
            this.showWrong();
            return false;
        }

        if (this.answer.right) {
            this.answer.selected = true;
            this.boxLightPic.alpha = 1;
            playAudio(this.rightAudio, true, () => {
                
            });
            if (callback) {
                callback();
            }
            return true;
        }
        else {
            this.showWrong();

            if(wrongCallback){
                wrongCallback();
            }

            return false;
        }
    }

    private showWrong() {
        this.boxLightPic.alpha = 1;
        playAudio(this.wrongAudio, true, () => {
            this.boxLightPic.alpha = 0;
        });

        shake(this.boxBg);
    }

    moveOut(callback = null) {
        this.initX = this.boxBg.x;
        this.initY = this.boxBg.y;

        this.moveout = true;

        tweenChange(this.boxBg, { y: this.boxBg.y + this.boxBg.height }, 0.3, () => {
            if (this.answer) {
                if (this.answer.contentType == 'T') {
                    this.wordBoard.removeChild(this.answer.bg);
                }
                else {
                    this.picBoard.removeChild(this.answer.bg);
                }
            }

            if (callback) {
                callback();
            }

        });
    }

    moveIn(callback = null) {
        tweenChange(this.boxBg, { y: this.initY }, 0.3, callback);
    }
}