import { PixiPointFrom } from "../../lib/pixi/pixify";
import { Vector2 } from "../../lib/util/geometry/vector2";

  args: {
  },
  text: string;
  position: Vector2;
  visible: boolean;

  private text: Pixi.Text;

    this.text = new Pixi.Text(props.text, {
      fontFamily: 'PixelMix',
      padding: 4, // https://github.com/pixijs/pixi.js/issues/4500 -- otherwise on first load the text bounding box is calculated to be too small and the tops of the f's get cut off
      fontSize: 26, // use 26 then scale down 50% results in sharper letters than 13
      // align: 'center'
    });
    this.text.scale = PixiPointFrom(new Vector2(0.5, 0.5));
    this.text.x = 10;
    this.text.y = 10;
    this.text.zIndex = 2;
    this.container.addChild(this.text);
    const box = new Pixi.Graphics();
    box.lineStyle(1, 0x222222, 1);
    box.beginFill(0xEEEEEE);
    box.drawRoundedRect(0, 0, this.text.width + 18, this.text.height + 18, 4);
    box.zIndex = 0;
    this.container.addChild(box);

  protected renderSelf() {

  protected renderSelf(props: Props) {
    this.container.visible = props.visible;
    this.container.position = PixiPointFrom(props.position);