import { Component, OnInit } from '@angular/core';

import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

import { Store, select } from '@ngrx/store';

import { ucapAnimations } from '@ucap-webmessenger/ui';
import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';

import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import { NGXLogger } from 'ngx-logger';
import { Company } from '@ucap-webmessenger/api-external';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';

@Component({
  selector: 'app-layout-chat-left-sidenav-group',
  templateUrl: './group.component.html',
  styleUrls: ['./group.component.scss'],
  animations: ucapAnimations
})
export class GroupComponent implements OnInit {
  groupBuddyList$: Observable<
    { group: GroupDetailData; buddyList: UserInfo[] }[]
  >;
  companyList$: Observable<Company[]>;
  companyCode: string;

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

  ngOnInit() {
    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
    this.companyCode = loginInfo.companyCode;

    this.companyList$ = this.store.pipe(
      select(AppStore.SettingSelector.CompanySelector.companyList),
      map(list => {
        this.logger.debug('list', list);
        return list;
      })
    );

    this.groupBuddyList$ = this.store
      .pipe(
        select(AppStore.MessengerSelector.SyncSelector.groupListAndBuddyList)
      )
      .pipe(
        map(groupListAndBuddyList => {
          const groupList = groupListAndBuddyList.groupList
            .slice()
            .sort((a, b) => {
              // 기본그룹은 제일 하단
              if (0 === a.seq) {
                return 1;
              } else if (0 === b.seq) {
                return -1;
              } else {
                if (a.name > b.name) {
                  return 1;
                }
                if (b.name > a.name) {
                  return -1;
                }
                return 0;
              }
            });

          const groupBuddyList: {
            group: GroupDetailData;
            buddyList: UserInfo[];
          }[] = [];
          for (const group of groupList) {
            const buddyList = groupListAndBuddyList.buddyList.filter(buddy => {
              return group.userSeqs.indexOf(buddy.seq) > -1;
            });

            groupBuddyList.push({
              group,
              buddyList
            });
          }

          return groupBuddyList;
        })
      );
  }

  onSelectBuddy(buddy: UserInfo) {
    this.store.dispatch(ChatStore.selectedRoom({ roomSeq: buddy.seq }));
  }

  onKeyDownEnterOrganizationTenantSearch(params: {
    companyCode: string;
    searchWord: string;
  }) {
    this.logger.debug('params', params);
  }
}