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

export class Palette extends Item {

    colorCardArr = [];

    bg: ShapeRect;

    init() {

        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();
    }

    private initColorCard() {

        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, x: number, y: number) => {
            const colorCard = new ColorCard(this.images, this.audioObj, this.scaleX, this.scaleY);
            colorCard.init(color);
            colorCard.bg.x = x * this.scaleX;
            colorCard.bg.y = y * this.scaleY;
            colorCardBg.addChild(colorCard.bg);
            return colorCard;
        };

        let y = 6;

        //红色
        const red = initCard('red', 24, y);
        red.color = '#f3440d';
        red.code = '01';
        this.colorCardArr.push(red);

        //紫色
        const purple = initCard('purple', 107, y);
        purple.color = '#c80df3';
        purple.code = '02';
        this.colorCardArr.push(purple);

        //绿色
        const green = initCard('green', 189, y);
        green.color = '#26eb45';
        green.code = '03';
        this.colorCardArr.push(green);

        //蓝色
        const blue = initCard('blue', 270, y);
        blue.color = '#26eb45';
        blue.code = '04';
        this.colorCardArr.push(blue);

        //桔色
        const orange = initCard('orange', 352, y);
        orange.color = '#ff9600';
        orange.code = '05';
        this.colorCardArr.push(orange);

        //粉红色
        const pink = initCard('pink', 433, y);
        pink.color = '#ff6073';
        pink.code ='06';
        this.colorCardArr.push(pink);

        //天蓝色
        const skyBlue = initCard('skyBlue', 515, y);
        skyBlue.color = '#07d6ff';
        skyBlue.code = '07'
        this.colorCardArr.push(skyBlue);

        //粉紫色
        const purplePink = initCard('purplePink', 596, y);
        purplePink.color = '#ff07ff';
        purplePink.code = '08';
        this.colorCardArr.push(purplePink);
    }
}

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(picName) {

        const bg = new ShapeRect();
        bg.setSize(66 * this.scaleX, 64 * this.scaleY);
        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 colorCardPic = getPic(bg, picName);
        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();
        }
    }
}