import {VELOCITY_VECTOR_COLOR} from '../config.js';
import {Tool} from '../tool.js';
import {add, components, direction, div, magnitude} from '../vector.js';

export class CameraTool extends Tool {
  setContainer(container) {
    super.setContainer(container);

    // Use the main sim display, but create a placeholder and draw inside it.
    // That way we aren't blocking the main display more than necessary
  }

  constructor() {
    super();

    this.div.style.width = '150px';
    this.div.style.height = '150px';
  }

  frame() {
    if (!this.container.expanded) return;

    const {display, panning} = this.sim;
    const {left, top, width, height} = this.div.getBoundingClientRect();
    const vecScale = this.sim.getOption('display.velocityScale');

    // Draw a vector for the camera velocity
    const offset = add(display.viewOrigin, div({x: left, y: top}, display.scale));
    const start = add(offset, div({x: width, y: height}, 2 * display.scale));
    let speed = magnitude(panning.velocity);
    let arrowLength = Math.log10(speed + 1) * vecScale;
    const arrowDirection = direction(panning.velocity);
    if (!this.sim.getOption('display.zoomVectors')) {
      arrowLength /= display.scale;
    }
    const end = add(start, components(arrowLength, arrowDirection));
    display.drawArrow(start.x, start.y, end.x, end.y, {
      style: VELOCITY_VECTOR_COLOR,
      ifShort: 'head',
    });
  }
}