import { m4 } from "../base/m4";
import { Scene } from "../base/Scene";
import { coerceIn } from "../base/utils";
import { Area } from "./common";
import { FillerData } from "./FillerData";

export class FillerScene extends Scene {
  fillerData?: FillerData;

  constructor(
    gl: WebGL2RenderingContext,
    ratio: number,
    anmationFrameProvider: AnimationFrameProvider = window,
    interact: boolean = true,
  ) {
    super(gl, ratio, anmationFrameProvider, interact);
  }

  focusToArea(area: Area) {
    if (this.fillerData == null) return;

    const size = area.center.radius * 4;
    const scale = coerceIn(
      Math.min(this.width / size, this.height / size),
      1,
      this.fillerData.config.maxScale,
    );
    const focusX = this.width / 2;
    const focusY = this.height / 2;

    const endMat = m4.identity();
    endMat[0] = scale;
    endMat[5] = scale;
    endMat[12] = -scale * area.center.x + focusX;
    endMat[13] = -scale * area.center.y + focusY;

    this.matrixAnimationTo(endMat, 600);
  }

  resetToResult() {
    this.matrixAnimationTo(this.resultMat, 500);
  }

  hint() {
    console.log("hint");

    if (this.fillerData == null) return;
    if (this.fillerData.currentGroup == null) return;

    let group = this.fillerData.currentGroup;
    let area = group.firstUncoloredArea;

    if (!area) return;

    console.log("find area:", area);
    this.focusToArea(area);
  }
}
