import { Tool } from '../tool.js';
import { 
  ZOOM_IN_FACTOR,
  ZOOM_OUT_FACTOR,
} from '../config.js';

export class Zoom extends Tool {
  constructor(toolbar) {
    super(toolbar);

    const zoomOut = document.createElement('button');
    const zoomIn = document.createElement('button');

    for (let b of [zoomIn, zoomOut]) {
      // b.style.width = '100px';
      // b.style.height = '50px';
      // b.style['padding-left'] = '25px';
      // b.style['padding-right'] = '25px';
    }

    this.div.appendChild(zoomOut);
    this.div.appendChild(zoomIn);

    zoomOut.innerHTML = '<h2>Zoom<br>-<br>Out</h2>';
    zoomIn.innerHTML = '<h2>Zoom<br>+<br>In</h2>';

    zoomOut.addEventListener('click', (e) => {
      // Aim at center of view
      const x = this.sim.display.width * this.sim.display.scale / 2;
      const y = this.sim.display.height * this.sim.display.scale / 2;
      console.log(`zoom out, x`, x, 'y', y);
      this.sim.scheduleZoom({x, y}, ZOOM_OUT_FACTOR);
    });

    zoomIn.addEventListener('click', (e) => {
      // Aim at center of view
      const x = this.sim.display.width * this.sim.display.scale / 2;
      const y = this.sim.display.height * this.sim.display.scale / 2;
      console.log(`zoom in, x`, x, 'y', y);
      this.sim.scheduleZoom({x, y}, ZOOM_IN_FACTOR);
    });
  }
}