import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ViewChildren
} from '@angular/core';
import {
  RoomInfo,
  UserInfoShort,
  UserInfo as RoomUserInfo,
  RoomType
} from '@ucap-webmessenger/protocol-room';
import { NGXLogger } from 'ngx-logger';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { FormsModule } from '@angular/forms';
import { MatCheckbox } from '@angular/material';

@Component({
  selector: 'ucap-room-list-item',
  templateUrl: './list-item.component.html',
  styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent implements OnInit {
  @Input()
  loginRes: LoginResponse;
  @Input()
  roomInfo: RoomInfo;
  @Input()
  roomUserInfo: (RoomUserInfo | UserInfoShort)[];
  @Input()
  sessionVerinfo: VersionInfo2Response;
  @Input()
  checkable = false;
  @Input()
  isChecked = false;
  @Input()
  multiCheckable = true;

  @Output()
  checkRoom = new EventEmitter<{
    isChecked: boolean;
    roomInfo: RoomInfo;
  }>();

  imagePath: string;
  defaultPath = 'assets/images/img_nophoto_50.png';
  finalEventMessage: string;
  RoomType = RoomType;

  constructor(private logger: NGXLogger) {}

  ngOnInit() {
    if (this.roomInfo.isTimeRoom) {
      this.finalEventMessage = '비밀 대화방입니다.';
    } else {
      this.finalEventMessage = this.roomInfo.finalEventMessage;
    }

    switch (this.roomInfo.roomType) {
      case RoomType.Multi:
        this.defaultPath = 'assets/images/img_groupphoto_80.png';
        break;
      case RoomType.Mytalk:
        const me = this.roomUserInfo.filter(
          v => v.seq === this.loginRes.userSeq
        );
        if (!!me && me.length > 0) {
          this.imagePath = me[0].profileImageFile;
        }
        break;
      case RoomType.Single:
      case RoomType.Bot:
      case RoomType.Allim:
        const others = this.roomUserInfo.filter(
          v => v.seq !== this.loginRes.userSeq
        );
        if (!!others && others.length > 0) {
          this.imagePath = others[0].profileImageFile;
        }
        break;
    }
  }

  getRoomName(roomInfo: RoomInfo): string {
    if (!!roomInfo.roomName && '' !== roomInfo.roomName.trim()) {
      return roomInfo.roomName;
    }

    if (roomInfo.roomType === RoomType.Mytalk) {
      return 'MyTalk';
    }

    if (!!this.roomUserInfo && 0 < this.roomUserInfo.length) {
      let roomName = '';
      this.roomUserInfo.forEach(
        (roomUserInfo: RoomUserInfo | UserInfoShort, index: number) => {
          if (
            this.loginRes.userSeq === roomUserInfo.seq ||
            !roomUserInfo.isJoinRoom
          ) {
            return;
          }
          if ('' === roomName.trim()) {
            roomName = roomName.concat('', roomUserInfo.name);
          } else {
            roomName = roomName.concat(',', roomUserInfo.name);
          }
        }
      );
      return roomName;
    }
  }

  get _roomUserInfos() {
    return this.roomUserInfo.filter(roomUserInfo => {
      return (
        this.loginRes.userSeq !== roomUserInfo.seq && !!roomUserInfo.isJoinRoom
      );
    });
  }

  // getChecked(value: boolean, roomInfo: RoomInfo) {
  //   if (value && !this.multiCheckable) {
  //     if (this.selected === roomInfo.roomSeq) {
  //       return true;
  //     } else {
  //       return false;
  //     }
  //   }
  // }

  onChangeCheck(value: boolean, roomInfo: RoomInfo) {
    this.checkRoom.emit({
      isChecked: value,
      roomInfo
    });
  }
}