import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import { BundleImageEventJson, Info } from '@ucap-webmessenger/protocol-event';
import { FileDownloadItem } from '@ucap-webmessenger/api';
import { NGXLogger } from 'ngx-logger';
import { RoomInfo } from '@ucap-webmessenger/protocol-room';
import { SelectFileInfo } from '@ucap-webmessenger/ui';

export interface Tile {
  colspan?: number;
  imgSrc?: string;
}
@Component({
  selector: 'ucap-chat-message-box-bundle-image',
  templateUrl: './bundle-image.component.html',
  styleUrls: ['./bundle-image.component.scss']
})
export class BundleImageComponent implements OnInit {
  @Input()
  set message(m: Info<BundleImageEventJson>) {
    this._message = m;

    this.makeTileGrid();
  }
  get message() {
    return this._message;
  }
  // tslint:disable-next-line: variable-name
  _message: Info<BundleImageEventJson>;

  @Input()
  roomInfo: RoomInfo;

  @Output()
  save = new EventEmitter<{
    fileInfo: BundleImageEventJson;
    fileDownloadItem: FileDownloadItem;
    type: string;
  }>();
  @Output()
  fileViewer = new EventEmitter<SelectFileInfo>();

  showExpired = false;
  tiles: Tile[] = [];

  constructor(private logger: NGXLogger) {}

  ngOnInit() {
    this.makeTileGrid();
  }

  makeTileGrid() {
    if (
      !this.message.sentMessageJson.thumbUrls ||
      0 === this.message.sentMessageJson.thumbUrls.length ||
      1 > this.message.sentMessageJson.fileCount
    ) {
      return;
    }
    const fileCount = Number(this.message.sentMessageJson.fileCount);

    this.tiles = [];

    const remainder = fileCount % 3;
    const quotient = Math.floor(fileCount / 3);

    let checkCount: number;

    if (remainder === 1 && fileCount > 1) {
      checkCount = quotient - 1;
    } else if (remainder === 2 && fileCount > 1) {
      checkCount = quotient;
    }

    this.message.sentMessageJson.thumbUrls.forEach((v, idx) => {
      const tile: Tile = {};

      if (checkCount <= Math.floor(idx / 3)) {
        tile.colspan = 3;
      } else if (fileCount === 1) {
        tile.colspan = 6;
      } else {
        tile.colspan = 2;
      }
      tile.imgSrc = this.message.sentMessageJson.baseUrl + v;
      this.tiles.push(tile);
    });
  }

  mouseEnter(event: MouseEvent): void {
    if (!this.roomInfo || this.roomInfo.expiredFileStdSeq > this.message.seq) {
      this.showExpired = true;
    }
    event.stopPropagation();
    event.preventDefault();
  }
  mouseLeave(event: MouseEvent): void {
    if (!this.roomInfo || this.roomInfo.expiredFileStdSeq > this.message.seq) {
      this.showExpired = false;
    }
    event.stopPropagation();
    event.preventDefault();
  }

  getExpiredFile() {
    if (
      !!this.roomInfo &&
      this.roomInfo.expiredFileStdSeq <= this.message.seq
    ) {
      return false;
    } else {
      return true;
    }
  }

  onClickFileViewer(index: number) {
    if (!this.getExpiredFile()) {
      this.fileViewer.emit({
        attachmentSeq: this._message.sentMessageJson.attachmentSeq,
        index
      });
    }
  }
}