import { UserSelectDialogType } from './../../../../types/userselect.dialog.type';
import { MatMenuTrigger } from '@angular/material';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';

import { Observable, combineLatest, Subscription } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { Store, select } from '@ngrx/store';

import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as QueryStore from '@app/store/messenger/query';
import * as SyncStore from '@app/store/messenger/sync';

import { NGXLogger } from 'ngx-logger';
import { Company } from '@ucap-webmessenger/api-external';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
import { KEY_VER_INFO } from '@app/types/ver-info.type';
import { ExpansionPanelComponent as GroupExpansionPanelComponent } from '@ucap-webmessenger/ui-group';

import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
import {
  DeptSearchType,
  UserInfoSS,
  UserInfoF,
  UserInfoDN
} from '@ucap-webmessenger/protocol-query';

import {
  ucapAnimations,
  DialogService,
  ConfirmDialogData,
  ConfirmDialogComponent,
  ConfirmDialogResult
} from '@ucap-webmessenger/ui';
import {
  CreateChatDialogComponent,
  CreateChatDialogData,
  CreateChatDialogResult
} from './../../dialogs/chat/create-chat.dialog.component';
import {
  EditGroupDialogComponent,
  EditGroupDialogData,
  EditGroupDialogResult
} from '@app/layouts/messenger/dialogs/group/edit-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, OnDestroy {
  @ViewChild('groupExpansionPanel', { static: true })
  groupExpansionPanel: GroupExpansionPanelComponent;

  @ViewChild('profileContextMenuTrigger', { static: true })
  profileContextMenuTrigger: MatMenuTrigger;
  profileContextMenuPosition = { x: '0px', y: '0px' };

  @ViewChild('groupContextMenuTrigger', { static: true })
  groupContextMenuTrigger: MatMenuTrigger;
  groupContextMenuPosition = { x: '0px', y: '0px' };

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

  loginRes: LoginResponse;
  loginResSubscription: Subscription;

  sessionVerinfo: VersionInfo2Response;

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

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

    this.loginResSubscription = this.store
      .pipe(
        select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
        tap(loginRes => {
          this.loginRes = loginRes;
        })
      )
      .subscribe();

    this.companyList$ = this.store.pipe(
      select(AppStore.SettingSelector.CompanySelector.companyList)
    );

    this.groupBuddyList$ = combineLatest([
      this.store.pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2)
      ),
      this.store.pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectAllGroup2)
      )
    ]).pipe(
      map(([buddyList, groupList]) => {
        const groupBuddyList: {
          group: GroupDetailData;
          buddyList: UserInfo[];
        }[] = [];
        for (const group of groupList) {
          groupBuddyList.push({
            group,
            buddyList: buddyList.filter(buddy => {
              return group.userSeqs.indexOf(buddy.seq) > -1;
            })
          });
        }

        return groupBuddyList;
      })
    );

    this.favoritBuddyList$ = this.store
      .pipe(select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2))
      .pipe(
        map(buddyInfoList => {
          return buddyInfoList
            .filter(buddy => buddy.isFavorit)
            .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
        })
      );
  }

  ngOnDestroy(): void {
    this.logger.debug('ngOnDestroy');
    if (!!this.loginResSubscription) {
      this.loginResSubscription.unsubscribe();
    }
  }

  async onClickGroupMenu(menuType: string) {
    this.logger.debug('menuType', menuType);
    switch (menuType) {
      case 'GROUP_NEW':
        {
          const result = await this.dialogService.open<
            CreateChatDialogComponent,
            CreateChatDialogData,
            CreateChatDialogResult
          >(CreateChatDialogComponent, {
            width: '600px',
            height: '500px',
            data: {
              type: UserSelectDialogType.NewGroup,
              title: 'New Group'
            }
          });

          if (!!result && !!result.choice && result.choice) {
            if (
              !!result.selectedUserList &&
              result.selectedUserList.length > 0 &&
              result.groupName.trim().length > 0
            ) {
              const userSeqs: number[] = [];
              result.selectedUserList.map(user => userSeqs.push(user.seq));

              this.store.dispatch(
                SyncStore.createGroupAndBuddy({
                  groupName: result.groupName,
                  trgtUserSeq: userSeqs
                })
              );
            }
          }
        }
        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.logger.debug('onSelectBuddy', buddy);
    if (buddy.seq === this.loginRes.userSeq) {
      this.store.dispatch(
        ChatStore.openRoom({ userSeqList: [this.loginRes.talkWithMeBotSeq] })
      );
    } else {
      this.store.dispatch(ChatStore.openRoom({ userSeqList: [buddy.seq] }));
    }
  }

  getStatusBulkInfo(buddy: UserInfo) {
    return this.store.pipe(
      select(
        AppStore.MessengerSelector.StatusSelector.selectEntitiesStatusBulkInfo
      ),
      map(statusBulkInfo =>
        !!statusBulkInfo ? statusBulkInfo[buddy.seq] : undefined
      )
    );
  }

  onKeyDownEnterOrganizationTenantSearch(params: {
    companyCode: string;
    searchWord: string;
  }) {
    this.store.dispatch(
      QueryStore.deptUser({
        divCd: 'GRP',
        companyCode: params.companyCode,
        searchRange: DeptSearchType.All,
        search: params.searchWord,
        senderCompanyCode: params.companyCode,
        senderEmployeeType: this.loginRes.userInfo.employeeType
      })
    );
  }

  getShowContextMenu(userInfo: UserInfo | UserInfoF) {
    if (userInfo.seq === this.loginRes.userSeq) {
      return false;
    } else {
      return true;
    }
  }
  onClickProfileContextMenu(menuType: string, userInfo: UserInfo | UserInfoF) {
    this.logger.debug(
      'onClickProfileContextMenu',
      'menuType',
      menuType,
      'userInfo',
      userInfo
    );
    switch (menuType) {
      case 'REGISTER_FAVORITE':
        this.store.dispatch(
          SyncStore.updateBuddy({
            seq: userInfo.seq,
            isFavorit: !userInfo.isFavorit
          })
        );
        break;
    }
  }

  onContextMenuProfile(
    event: MouseEvent,
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN
  ) {
    event.preventDefault();
    event.stopPropagation();

    this.profileContextMenuPosition.x = event.clientX + 'px';
    this.profileContextMenuPosition.y = event.clientY + 'px';
    this.profileContextMenuTrigger.menu.focusFirstItem('mouse');
    this.profileContextMenuTrigger.menuData = { userInfo };
    this.profileContextMenuTrigger.openMenu();
  }

  async onClickGroupContextMenu(menuType: string, group: GroupDetailData) {
    this.logger.debug(
      'onClickGroupContextMenu',
      'menuType',
      menuType,
      'group',
      group
    );
    switch (menuType) {
      case 'CHAT':
        this.store.dispatch(
          ChatStore.openRoom({ userSeqList: group.userSeqs })
        );
        break;
      case 'SEND_NOTE':
        break;
      case 'RENAME':
        {
          const result = await this.dialogService.open<
            EditGroupDialogComponent,
            EditGroupDialogData,
            EditGroupDialogResult
          >(EditGroupDialogComponent, {
            width: '600px',
            height: '500px',
            data: {
              title: 'Group Name Edit',
              group
            }
          });

          if (!!result && !!result.choice && result.choice) {
            if (!!result.groupName && result.groupName.trim().length > 0) {
              this.store.dispatch(
                SyncStore.updateGroup({
                  groupSeq: result.group.seq,
                  groupName: result.groupName,
                  userSeqs: result.group.userSeqs
                })
              );
            }
          }
        }
        break;
      case 'EDIT_MEMBER':
        {
          const result = await this.dialogService.open<
            CreateChatDialogComponent,
            CreateChatDialogData,
            CreateChatDialogResult
          >(CreateChatDialogComponent, {
            width: '600px',
            height: '500px',
            data: {
              type: UserSelectDialogType.EditMember,
              title: 'Group Member Edit',
              group
            }
          });

          if (!!result && !!result.choice && result.choice) {
            if (!!result.oldGroup) {
              const userSeqs: number[] = [];
              result.selectedUserList.map(user => userSeqs.push(user.seq));

              this.store.dispatch(
                SyncStore.updateGroupMember({
                  oldGroup: group,
                  trgtUserSeq: userSeqs
                })
              );
            }
          }
        }
        break;
      case 'DELETE':
        {
          const result = await this.dialogService.open<
            ConfirmDialogComponent,
            ConfirmDialogData,
            ConfirmDialogResult
          >(ConfirmDialogComponent, {
            width: '220px',
            data: {
              title: 'Delete group',
              html: `그룹(${group.name})을 삭제하시겠습니까?<br/>그룹 멤버는 해당 그룹에서만 삭제됩니다.`
            }
          });

          if (!!result && !!result.choice && result.choice) {
            this.store.dispatch(SyncStore.delGroup({ group }));
          }
        }
        break;
      default:
        break;
    }
  }

  onMoreGroup(params: { event: MouseEvent; group: GroupDetailData }) {
    params.event.preventDefault();
    params.event.stopPropagation();

    this.groupContextMenuPosition.x = params.event.clientX + 'px';
    this.groupContextMenuPosition.y = params.event.clientY + 'px';
    this.groupContextMenuTrigger.menu.focusFirstItem('mouse');
    this.groupContextMenuTrigger.menuData = { group: params.group };
    this.groupContextMenuTrigger.openMenu();
  }
}