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

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

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

import { ucapAnimations, DialogService } 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';
import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';
import {
  CreateGroupDialogComponent,
  CreateGroupDialogData,
  CreateGroupDialogResult
} from '@app/layouts/messenger/dialogs/create-group.dialog.component';

@Component({
  selector: 'app-layout-chat-left-sidenav-group',
  templateUrl: './group.component.html',
  styleUrls: ['./group.component.scss'],
  animations: ucapAnimations
})
export class GroupComponent implements OnInit {
  @ViewChild('groupExpansionPanel', { static: true })
  groupExpansionPanel: GroupExpansionPanelComponent;

  groupBuddyList$: Observable<
    { group: GroupDetailData; buddyList: UserInfo[] }[]
  >;
  companyList$: Observable<Company[]>;
  companyCode: string;

  constructor(
    private store: Store<any>,
    private sessionStorageService: SessionStorageService,
    private dialogService: DialogService,
    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)
    );

    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;
        })
      );
  }

  async onClickGroupMenu(menuType: string) {
    this.logger.debug('menuType', menuType);
    switch (menuType) {
      case 'GROUP_NEW':
        {
          const result = await this.dialogService.open<
            CreateGroupDialogComponent,
            CreateGroupDialogData,
            CreateGroupDialogResult
          >(CreateGroupDialogComponent, {
            width: '220px',
            data: {
              title: 'Logout',
              message: 'Logout ?'
            }
          });
        }
        break;
      case 'GROUP_EXPAND_MORE':
        {
          this.groupExpansionPanel.expandMore();
        }
        break;
      case 'GROUP_EXPAND_LESS':
        {
          this.groupExpansionPanel.expandLess();
        }
        break;
      case 'GROUP_SAVE':
        break;
      case 'GROUP_RESTORE':
        break;

      default:
        break;
    }
  }

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

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