import {
  Component,
  OnInit,
  Input,
  EventEmitter,
  Output,
  ViewChild,
  ViewChildren,
  QueryList
} from '@angular/core';

import { Info, EventType } from '@ucap-webmessenger/protocol-event';
import {
  LoginResponse,
  UserInfo
} from '@ucap-webmessenger/protocol-authentication';
import { NGXLogger } from 'ngx-logger';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { FileInfo } from '../models/file-info.json';
import { DatePipe } from '@angular/common';
import { MatMenu, MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'ucap-chat-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {
  @Input()
  loginRes: LoginResponse;
  @Input()
  messages: Info[];
  @Input()
  userInfos?: UserInfo[];
  @Input()
  sessionVerInfo: VersionInfo2Response;

  @Output()
  massDetail = new EventEmitter<number>();
  @Output()
  imageViewer = new EventEmitter<FileInfo>();
  @Output()
  save = new EventEmitter<{ fileInfo: FileInfo; type: string }>();

  @ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;
  @ViewChild('messageContextMenu', { static: true })
  messageContextMenu: MatMenu;
  messageContextMenuPosition = { x: '0px', y: '0px' };

  EventType = EventType;
  profileImageRoot: string;

  constructor(
    private logger: NGXLogger,
    private sessionStorageService: SessionStorageService,
    private datePipe: DatePipe
  ) {}

  ngOnInit() {
    this.profileImageRoot =
      this.profileImageRoot || this.sessionVerInfo.profileRoot;
  }

  getUserName(seq: number): string {
    if (!this.userInfos) {
      return '';
    }

    const userInfo: UserInfo[] = this.userInfos.filter(
      user => user.seq === seq
    );
    if (!!userInfo && userInfo.length > 0) {
      return userInfo[0].name;
    }
    return '(알수없는 사용자)';
  }
  getUserProfile(seq: number): string {
    if (!this.userInfos) {
      return '';
    }

    const userInfo: UserInfo[] = this.userInfos.filter(
      user => user.seq === seq
    );
    if (!!userInfo && userInfo.length > 0) {
      return this.profileImageRoot + userInfo[0].profileImageFile;
    }
    return '';
  }

  /**
   * 정보성 Event 인지 판단.
   * @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다.
   */
  getIsInformation(info: Info) {
    if (
      info.type === EventType.Join ||
      info.type === EventType.Exit ||
      info.type === EventType.RenameRoom ||
      info.type === EventType.NotificationForTimerRoom ||
      info.type === EventType.GuideForRoomTimerChanged
    ) {
      return true;
    }
    return false;
  }

  /** Date Splitter check */
  getDateSplitter(curIndex: number): boolean {
    if (curIndex === 0) {
      return true;
    }
    if (curIndex > 0) {
      return (
        this.datePipe.transform(
          this.messages[curIndex].sendDate,
          'yyyyMMdd'
        ) !==
        this.datePipe.transform(
          this.messages[curIndex - 1].sendDate,
          'yyyyMMdd'
        )
      );
    }
    return false;
  }

  isCopyableMessage(eventType: EventType): boolean {
    return (
      EventType.Character === eventType || EventType.Translation === eventType
    );
  }

  isRecalledMessage(eventType: EventType): boolean {
    return EventType.RecalledMessage === eventType;
  }

  isMine(message: Info): boolean {
    return message.senderSeq === this.loginRes.userSeq;
  }

  /** [Event] MassTalk Detail View */
  onMassDetail(value: number) {
    this.massDetail.emit(value);
  }

  /** [Event] Image Viewer */
  onImageViewer(value: FileInfo) {
    this.imageViewer.emit(value);
  }

  /** [Event] Attach File Save & Save As */
  onSave(value: { fileInfo: FileInfo; type: string }) {
    this.save.emit(value);
  }

  onContextMenuMessage(event: MouseEvent, eventType: EventType, message: Info) {
    event.preventDefault();

    this.messageContextMenu.focusFirstItem('mouse');

    this.messageContextMenuPosition.x = event.clientX + 'px';
    this.messageContextMenuPosition.y = event.clientY + 'px';
    const messageContextMenuTrigger = this.menuTriggerList.toArray()[0];
    messageContextMenuTrigger.menuData = { eventType, message };
    messageContextMenuTrigger.openMenu();
  }
}