import getBrowserDimensions from './utils/getBrowserDimensions.js';
import Logger from './Logger';
export default class Screen {

  constructor(parent, width = 600, height = 600) {
    this.parent = parent;
    this.log = new Logger();
    // const { browserWidth, browserHeight } = getBrowserDimensions(window, document);
    this.height = height; // === 0 ? browserHeight : height;
    this.width = width; // === 0 ? browserWidth : width;
    this.resize = this.resize.bind(this);
    // window.addEventListener('resize', this.resize, false);
    this.destroy = this.destroy.bind(this);
    this.clear = this.clear.bind(this);
    this.getSurface = this.getSurface.bind(this);
    // make 0,0  center screen.
    this.surface.translate(this.width / 2, this.height / 2);
  }

  destroy() {
    window.removeEventListener('resize');
  }

  clear() {
    this.surface.clearRect(- this.width / 2,
      - this.height / 2,
      this.width, this.height);
  }

  resize() {
    const { browserWidth, browserHeight } = getBrowserDimensions(window, document);
    this.height = Math.min(browserHeight, this.height);
    this.width = Math.min(browserWidth, this.width);
    this.screen.setAttribute('width', `${this.width}px`);
    this.screen.setAttribute('height', `${this.height}px`);
  }

  getSurface() {
    return this.surface;
  }

  createCanvasElement(id) {
    const divElement = document.createElement('div');
    divElement.setAttribute('style', `
      margin: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate( -50%, -50%);
    `);
    const canvasElement = document.createElement('canvas');
    canvasElement.id = id;
    canvasElement.style.background = '#000000';
    canvasElement.width = `${this.width}px`;
    canvasElement.height = `${this.height}px`;
    canvasElement.setAttribute('width', `${this.width}px`);
    canvasElement.setAttribute('height', `${this.height}px`);
    divElement.appendChild(canvasElement);
    this.parent.appendChild(divElement);
    return canvasElement;
  }
}
    this.screen = this.createCanvasElement(`screen-${0}`, height, width);
    this.surface = this.screen.getContext('2d');
    this.surface.scale(1, 1);
    this.createCanvasElement = this.createCanvasElement.bind(this);