import { Component, OnInit, OnDestroy } from '@angular/core';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { NGXLogger } from 'ngx-logger';
import { Store, select } from '@ngrx/store';
import { Subscription } from 'rxjs';
import {
  RoomInfo,
  UserInfoShort,
  UserInfo as RoomUserInfo
} from '@ucap-webmessenger/protocol-room';
import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-layout-chat-left-sidenav-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss'],
  animations: ucapAnimations
})
export class ChatComponent implements OnInit, OnDestroy {
  roomList: RoomInfo[];
  roomUserInfoMap: {
    [param: string]: {
      userInfoShortList: UserInfoShort[];
      userInfoList: RoomUserInfo[];
    };
  };

  roomSubscription: Subscription;

  constructor(private store: Store<any>, private logger: NGXLogger) {}

  ngOnInit() {
    this.roomSubscription = this.store
      .pipe(
        select(AppStore.MessengerSelector.SyncSelector.room),
        tap(room => {
          this.roomList = room.roomList;
          this.roomUserInfoMap = room.roomUserInfoMap;
        })
      )
      .subscribe();
  }

  ngOnDestroy(): void {
    if (!!this.roomSubscription) {
      this.roomSubscription.unsubscribe();
    }
  }

  onSelectedRoom(roomInfo: RoomInfo) {
    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: roomInfo.roomSeq }));
  }

  getRoomUserList(roomInfo: RoomInfo): RoomUserInfo[] | UserInfoShort[] {
    if (
      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoList &&
      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoList.length
    ) {
      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoList;
    }
    if (
      !!this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList &&
      0 < this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList.length
    ) {
      return this.roomUserInfoMap[roomInfo.roomSeq].userInfoShortList;
    }
  }
}