import { Item } from './Item';
import { ShapeRect, MySprite, ShapeCircle,LineCircle } from './Unit';

export class Palette extends Item {

    colorCardArr = [];

    bg: ShapeRect;

    init(colorArr) {

        const palettePic = this.getPic('palette');
        palettePic.x = palettePic.getBoundingBox().width / 2;
        palettePic.y = palettePic.getBoundingBox().height / 2;

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

        //初始化颜色卡片
        this.initColorCard(colorArr);
    }

    private initColorCard(colorArr) {

        const colorCardBg = new ShapeRect();
        colorCardBg.setSize(684 * this.scaleX, 76 * this.scaleY);
        colorCardBg.alpha = 0;
        colorCardBg.x = 12 * this.scaleX;
        colorCardBg.y = 19 * this.scaleY;
        this.bg.addChild(colorCardBg);

        const initCard = (color, y: number) => {
            const colorCard = new ColorCard(this.images, this.audioObj, this.scaleX, this.scaleY);
            colorCard.init(color);
            colorCard.bg.y = y * this.scaleY;
            colorCardBg.addChild(colorCard.bg);
            return colorCard;
        };

        let y = 6;

        let cardWidth = 59 * this.scaleX;

        let dis = 23 * this.scaleX;

        let disW = cardWidth + dis;

        let x = (colorCardBg.width - colorArr.length * cardWidth - (colorArr.length - 1) * dis) / 2;

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

            const colorCard = initCard(colorArr[i].val, y);
            this.colorCardArr.push(colorCard);
            colorCard.bg.x = x + i * disW;
        }


    }
}

export class ColorCard extends Item {

    bg: ShapeRect;

    lightPic: MySprite;

    touched = false;

    _color: string;

    _code: string;

    set color(color) {
        this._color = color;
    }

    get color() {
        return this._color;
    }

    set code(code) {
        this._code = code;
    }

    get code() {
        return this._code;
    }

    init(color) {
        
        this._code = color;
        this._color = color;

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

        const getPic = (par: ShapeRect, picName) => {
            const pic = new MySprite();
            pic.init(this.images.get(picName));
            pic.scaleX = this.scaleX;
            pic.scaleY = this.scaleY;
            pic.x = par.width / 2;
            pic.y = par.height / 2;
            return pic;
        };

        const colorCardLight = getPic(bg, 'light');
        colorCardLight.alpha = 0;
        this.lightPic = colorCardLight;
        bg.addChild(colorCardLight);

        const  colorCircle = new LineCircle();
        colorCircle.lineColor = color;
        colorCircle.lineWidth = 2 * this.scaleX;
        colorCircle.radius = 29.5 * this.scaleX;
        colorCircle.color = color;
        colorCircle.x = bg.width / 2;
        colorCircle.y = bg.height / 2;
        bg.addChild(colorCircle);

        const colorCardPic = new ShapeCircle();
        colorCardPic.fillColor = color;
        colorCardPic.radius = 25.5 * this.scaleX;
        colorCardPic.color = color;
        
        colorCardPic.x = bg.width / 2;
        colorCardPic.y = bg.height / 2;
        bg.addChild(colorCardPic);
    }

    click(callback = null) {
        this.touched = true;
        this.lightPic.alpha = 1;
        if (callback) {
            callback();
        }
    }

    touch(callback = null) {
        this.touched = true;
        this.lightPic.alpha = 1;
        if (callback) {
            callback();
        }
    }

    moveout(callback = null) {
        this.touched = false;
        this.lightPic.alpha = 0;

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