import { Shape } from "./Shape";
import { R } from "../R";
import { Point } from "../planimetry";
import { getPointsFromImageData } from "../image";
import { CircleShape } from "./CircleShape";
import { index2pos, chunk } from "../utils";

export class TextShape extends Shape {
  constructor(
    public text: string,
    public size: number = 12,
    public pos: Point = [0, 0],
  ) {
    super();
  }

  public render: R = (ctx: CanvasRenderingContext2D) => {
    ctx.save();
    ctx.textAlign = 'start';
    ctx.textBaseline = 'top';
    ctx.font = this.size + 'px FZKaTong-M19S';
    const { width } = ctx.measureText(this.text);
    ctx.fillText(this.text, this.pos[0], this.pos[1]);
    const idata = ctx.getImageData(this.pos[0], this.pos[1], width, this.size);
    console.log(idata);
    


    const ps = chunk(20,getPointsFromImageData(idata)).map(r => r[0]);
    ctx.clearRect(this.pos[0], this.pos[1], width, this.size);
    ps.map(p => {
     const c = new CircleShape([index2pos(p, idata.width), 2]);
     return c;
    }).forEach(s => {
      ctx.save();
      const color = Math.floor(Math.random() * 256);
      const color1 = Math.floor(Math.random() * 80);
      const color2 = Math.floor(Math.random() * 25);
      ctx.strokeStyle = 'rgba(' + color + ',' + color1 + ',' + color2 + ')';
      s.render(ctx);
      ctx.restore();
    });
    console.log(ps);
    ctx.stroke();
    // backCanvasCtx.fillStyle = '#f00';

    ctx.restore();
  }

}