import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-img-magnifier',
  templateUrl: './img-magnifier.component.html',
  styleUrls: ['./img-magnifier.component.scss']
})
export class ImgMagnifierComponent implements OnInit, AfterViewInit {

  @Input('src') src: string;
  @Input('zoom') zoom: number;
  @Input('magnifierSize') magnifierSize: {width: number, height: number};
  @ViewChild('mainImg') mainImg: ElementRef;

  backgroundSize;
  magnifierPos = {x: 0, y: 0};
  showMagnifier = false;

  constructor(
    private window: Window
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.calcBackgroundSize();
    }, 1);
  }

  calcPos(event) {
    const img = this.mainImg.nativeElement.getBoundingClientRect();
    this.magnifierPos.x = Math.min(img.width - this.magnifierSize.width, Math.max(0, event.pageX - img.left - this.window.pageXOffset - this.magnifierSize.width / 2));
    this.magnifierPos.y = Math.min(img.height - this.magnifierSize.height + 7, Math.max(0, event.pageY - img.top - this.window.pageYOffset - this.magnifierSize.height / 2));
  }

  calcBackgroundSize() {
    this.backgroundSize = this.mainImg ? (this.mainImg.nativeElement.width * this.zoom - this.magnifierSize.width) + 'px ' + (this.mainImg.nativeElement.height * this.zoom - this.magnifierSize.height) + 'px ' : '0 0';
  }
}