import { Item } from './Item';
import { ShapeRect, MySprite, shake2, ShapeRectNew } from './Unit';
import { playAudio } from './AudioUtil';
import { Star } from './StarUtil'
import { PageBar, CyclePageBar } from './PageBar';

export class Stage extends Item {
    bg: ShapeRect;

    data;

    spacing = 35;

    cardArr = [];

    pageBar: PageBar;

    tempCardArr = [];

    set x(x) {
        this._x = x;

        if (this.bg) {
            this.bg.x = this._x;
        }
    }


    set y(y) {
        this._y = y;

        if (this.bg) {
            this.bg.y = this._y;
        }
    }

    set width(width) {
        this._width = width;
        if (this.bg) {
            this.bg.width = this._width;
        }
    }

    get width() {
        return this._width;
    }

    init(data) {
        this.data = data;

        this.spacing = this.spacing * this.scaleX;

        this.height = 296;

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

        this.initCard();

        this.initPageBar();

        this.showNextPage();
    }

    showLastPage(callback = null) {
        this.pageBar.last((data) => {
            this.showCard(data, callback);
        });
    }

    showNextPage(callback = null) {
        this.pageBar.next((data) => {
            this.showCard(data, callback);
        });
    }


    isEnd() {

        let ended = true;

        for (let i = 0; i < this.cardArr.length; ++i) {
            let card = this.cardArr[i];

            if (!card.answered) {
                ended = false;
                break;
            }
        }

        return ended;
    }

    private initCard() {
        for (let i = 0; i < this.data.picArr.length; ++i) {
            let picInfo = this.data.picArr[i];

            const card = new Card(this.images, this.audioObj, this.scaleX, this.scaleY);
            card.init(picInfo);
            this.cardArr.push(card);
        }

    }

    private initPageBar() {
        const pageBar = new CyclePageBar(this.images, this.audioObj, this.scaleX, this.scaleY);
        pageBar.showPageBtn = true;
        pageBar.init(this.cardArr, 4);
        pageBar.show();
        this.pageBar = pageBar;

        this.pageBar.x = (this.bg.width - this.pageBar.bg.width) / 2;
        this.pageBar.y = this.bg.height + 25 * this.scaleY;
        this.bg.addChild(pageBar.bg);
    }

    private showCard(cardArr = [], callback = null) {

        let width = 0;

        let cardWidth = 271 * this.scaleX;

        if (this.tempCardArr) {
            for (let i = 0; i < this.tempCardArr.length; ++i) {
                this.bg.removeChild(this.tempCardArr[i].bg);
            }
        }

        this.tempCardArr = cardArr;

        if (cardArr.length > 0) {
            width = cardArr.length * cardWidth + (cardArr.length - 1) * this.spacing;
        }

        let disW = cardWidth + this.spacing;

        let x = (this.width - width) / 2;

        for (let i = 0; i < cardArr.length; ++i) {
            let card = cardArr[i];

            card.y = 0;

            card.x = x + i * disW;

            this.bg.addChild(card.bg);
        }


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

export class Card extends Item {

    bg: ShapeRect;

    picInfo;

    answered = false;

    cardLight: MySprite;

    cardBox: MySprite;

    colorBg: ShapeRectNew;

    starBg : ShapeRect;

    cardBoxBorder: MySprite;

    set x(x) {
        this._x = x;

        if (this.bg) {
            this.bg.x = this._x;
        }
    }


    set y(y) {
        this._y = y;

        if (this.bg) {
            this.bg.y = this._y;
        }
    }

    init(picInfo) {

        this.picInfo = picInfo;

        this.width = 271;
        this.height = 304;

        const bg = new ShapeRect();
        bg.setSize(this._width, this._height);
        bg.alpha = 0;
        bg.x = this.x;
        bg.y = this.y;
        this.bg = bg;

        const colorBg = new ShapeRectNew();
        colorBg.setSize(265 * this.scaleX, 294 * this.scaleY, 30 * this.scaleX);
        colorBg.fillColor = '#ff07ff';
        colorBg.x = (bg.width - colorBg.width) / 2;
        colorBg.y = (bg.height - colorBg.height) / 2 - 1 * this.scaleY;
        colorBg.alpha = 0;
        bg.addChild(colorBg, 0);
        this.colorBg = colorBg;

        const cardBox = this.getPic('card_box');
        cardBox.x = bg.width / 2;
        cardBox.y = bg.height / 2;
        bg.addChild(cardBox, 1);
        this.cardBox = cardBox;

        const cardBoxBorder = this.getPic('card_box_border');
        cardBoxBorder.x = bg.width / 2;
        cardBoxBorder.y = bg.height / 2;
        bg.addChild(cardBoxBorder, 3);
        this.cardBoxBorder = cardBoxBorder;

        const cardLight = this.getPic('card_light');
        cardLight.x = bg.width / 2 + 1 * this.scaleX;
        cardLight.y = bg.height / 2 + 3 * this.scaleY;
        cardLight.alpha = 0;
        bg.addChild(cardLight, 4);
        this.cardLight = cardLight;

        const starBg = new ShapeRect();
        starBg.setSize(265 * this.scaleX, 294 * this.scaleY);
        starBg.x = 0;
        starBg.y = 0;
        starBg.alpha = 0;
        bg.addChild(starBg, 999);
        this.starBg = starBg;

        this.initPic();
    }

    private initPic() {

        const setScale = (pW, pH, child) => {
            let width = child.width;
            let height = child.height;
            let sx = pW / width;
            let sy = pH / height;

            let scale = Math.min(sx, sy);
            if (scale < 1) {
                child.setScaleXY(scale);
            }
        }

        const pic = this.getPic(this.picInfo.picUrl);
        pic.x = this.bg.width / 2;
        pic.y = this.bg.height / 2;
        setScale(this.bg.width - 45 * this.scaleX, this.bg.height - 45 * this.scaleY, pic);
        this.bg.addChild(pic, 2);
    }

    click(callback = null) {

        if (this.answered) {
            return;
        }

        this.cardLight.alpha = 1;

        if (callback) {
            callback();
        }
    }

    hideLight() {
        this.cardLight.alpha = 0;
    }

    fillColor(color) {
        if(this.answered){
            return;
        }
        this.colorBg.fillColor = color;
        this.colorBg.alpha = 1;
        this.cardBoxBorder.alpha = 0;
    }

    clearColor(){
        if(this.answered){
            return;
        }
        this.colorBg.alpha = 0;
        this.cardBoxBorder.alpha = 1;
    }

    checkRight(colorCode, color, callback = null, errCallback = null) {
        console.log(colorCode, color);
        if (!colorCode) {
            this.showErr(errCallback);
            return false;
        }

        if (colorCode === this.picInfo.color) {
            this.showRight(color, callback);
            return true;
        }
        else {
            this.showErr(errCallback);
            return false;
        }
    }

    private showErr(callback = null) {
        this.cardLight.alpha = 1;
        
        playAudio(this.audioObj['wrong']);
        shake2(this.bg, 1, ()=>{
            this.clearColor();
            if(callback){
                callback();
            }
        });
    }

    private showRight(color, callback = null) {
        this.answered = true;
        playAudio(this.audioObj['star']);

        this.fillColor(color)

        this.cardLight.alpha = 0;

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