import * as THREE from "three";

export default class TextLabel extends THREE.Mesh {
  constructor(text, outline) {
    let res = 5;
    const width = 150 * res;
    const height = 15 * res;
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    let fontFamily = "Arial";
    let fontSize = 7 * res;
    let offsetX = 75 * res;
    let offsetY = 10 * res;
    var context = canvas.getContext("2d");

    context.fillStyle = "#ffffff";
    context.rect(0, 0, width, height);
    context.fill();
    context.font = "normal " + fontSize + "px " + fontFamily;
    context.fillStyle = "#000000";
    context.textAlign = "center";
    context.fillText(text, offsetX, offsetY);
    const canvas_map = new THREE.Texture(canvas);
    canvas_map.colorSpace = THREE.SRGBColorSpace;
    canvas_map.needsUpdate = true;
    canvas_map.anisotropy = 4;

    const g = new THREE.PlaneGeometry(1.5, 0.15);
    g.rotateX(-Math.PI / 2);

    const m = new THREE.MeshBasicMaterial({
      map: canvas_map,
    });
    super(g, m);

    const edges = new THREE.EdgesGeometry(g);
    const line = new THREE.LineSegments(
      edges,
      new THREE.LineBasicMaterial({ color: 0xcccccc })
    );
    line.position.y += 0.5;
    this.add(line);

    this.name = "textlabel_" + text;
  }
}