import { Component, OnInit, Input } from "@angular/core";
import { ModalController } from "@ionic/angular";
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
import { ImageModal } from './image-modal/image.modal';
@Component({
  selector: "app-image-modal",
  templateUrl: "./image-modal.page.html",
  styleUrls: ["./image-modal.page.scss"]
})
export class ImageModalPage implements OnInit {
  public tempImage = "assets/icon/no-image.jpg";
  @Input() imageName = this.tempImage;
  public scaling: any;
  public scale: any = 1;
  public startDistance: any;
  constructor(
    public sharedService: SharedDataService
  ) { }

  ngOnInit() {
    this.imageName = this.sharedService.getSharedData(ImageModal.SHARED_DATA).image;
  }


  zoomStart(e: any) {
    if (e.touches.length === 2) {
      this.scaling = true;
      this.pinchStart(e);
    }
  }
  zoomMove(e: any) {
    if (this.scaling) {
      this.pinchMove(e);
    }
  }
  pinchStart(e: any) {
    this.startDistance = this.getDistance(e);
  }
  pinchMove(e: any) {
    const dis = this.getDistance(e);
    if (this.startDistance <= dis) {
      const scale = this.scale += (.02);
      e.currentTarget.style.transform = "scale(" + scale + "," + scale + ")";
    } else {
      const scale = this.scale -= (.02);
      e.currentTarget.style.transform = "scale(" + scale + "," + scale + ")";
    }
  }

  getDistance(e: any) {
    const dis = Math.hypot(
      e.touches[0].pageX - e.touches[1].pageX,
      e.touches[0].pageY - e.touches[1].pageY);
    return dis;
  }
}
