import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  ViewChild
} from '@angular/core';
import { ucapAnimations } from '../../animations';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { FileDownloadItem } from '@ucap-webmessenger/api';

@Component({
  selector: 'ucap-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.scss'],
  animations: ucapAnimations
})
export class ImageViewerComponent implements OnInit {
  @Input()
  fileInfo: FileEventJson;

  @Input()
  fileDownloadUrl: string;

  @Output()
  closed = new EventEmitter<void>();

  @Output()
  download = new EventEmitter<FileDownloadItem>();

  fileDownloadItem: FileDownloadItem;

  naturalWidth = 0;
  naturalHeight = 0;

  zoomRatio = 100;

  constructor() {}

  ngOnInit() {
    this.naturalWidth = this.fileInfo.imageWidth;
    this.naturalHeight = this.fileInfo.imageHeight;
  }

  onClickDownload(): void {
    this.fileDownloadItem = new FileDownloadItem();
    this.download.emit(this.fileDownloadItem);
  }

  onClickClose(): void {
    this.closed.emit();
  }

  onLoadFileDownloadUrl(img: HTMLImageElement) {
    console.log('onLoadFileDownloadUrl', img.naturalWidth, img.naturalHeight);
    this.naturalWidth = img.naturalWidth;
    this.naturalHeight = img.naturalHeight;
  }

  onClickZoomOut() {
    if (60 >= this.zoomRatio) {
      return;
    }
    this.zoomRatio -= 10;
  }
  onClickZoomIn() {
    if (180 <= this.zoomRatio) {
      return;
    }
    this.zoomRatio += 10;
  }
  onClickZoomReset() {
    this.zoomRatio = 100;
  }
}
