import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ucapAnimations } from '../../animations';
import { FileEventJson } from '@ucap-webmessenger/protocol-event';
import { DeviceType, FileUtil, MimeUtil } from '@ucap-webmessenger/core';
import {
  CommonApiService,
  FileDownloadItem
} from '@ucap-webmessenger/api-common';
import { take, map } from 'rxjs/operators';

@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()
  downloadUrl: string;

  @Input()
  userSeq: number;

  @Input()
  deviceType: DeviceType;

  @Input()
  token: string;

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

  imageSrc: string | ArrayBuffer;

  fileDownloadItem: FileDownloadItem;

  constructor(private commonApiService: CommonApiService) {
    this.fileDownloadItem = new FileDownloadItem();
  }

  ngOnInit() {
    this.commonApiService
      .fileTalkDownload(
        {
          userSeq: this.userSeq,
          deviceType: this.deviceType,
          token: this.token,
          attachmentsSeq: this.fileInfo.attachmentSeq,
          fileDownloadItem: this.fileDownloadItem
        },
        this.downloadUrl
      )
      .pipe(
        take(1),
        map(async blob => {
          const b = blob.slice(
            0,
            blob.size,
            MimeUtil.getMimeFromExtension(this.fileInfo.fileExt)
          );
          this.imageSrc = await FileUtil.toDataUrl(b);
        })
      )
      .subscribe();
  }

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