import {
  Directive,
  ElementRef,
  Input,
  SimpleChanges,
  Renderer2,
} from "@angular/core";

@Directive({
  selector: "img[preview]",
})
export class ImagePreviewDirective {
  @Input() public image: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  public ngOnChanges(changes: SimpleChanges) {
    let reader = new FileReader();
    let el = this.el;

    reader.onloadend = (readerEvent) => {
      let image = new Image();
      image.onload = (imageEvent) => {
        // Resize the image
        let canvas = document.createElement("canvas");
        let maxSize = 400;
        let width = image.width;
        let height = image.height;
        if (width > height) {
          if (width > maxSize) {
            height *= maxSize / width;
            width = maxSize;
          }
        } else {
          if (height > maxSize) {
            width *= maxSize / height;
            height = maxSize;
          }
        }
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0, width, height);
        el.nativeElement.src = canvas.toDataURL("image/jpeg");
      };
      let strImageSrc =
        reader.result instanceof ArrayBuffer
          ? String.fromCharCode.apply(null, new Uint16Array(reader.result))
          : reader.result;
      image.src = strImageSrc;
    };

    if (this.image) {
      return reader.readAsDataURL(this.image);
    }
  }
}