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

import { Observable, combineLatest, Subscription } from 'rxjs';
import { map, tap } 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 * as QueryStore from '@app/store/messenger/query';
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';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import {
  DeptSearchType,
  UserInfoSS,
  UserInfoF,
  UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { MatMenuTrigger, MatMenu } from '@angular/material';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { KEY_VER_INFO } from '@app/types/ver-info.type';

@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;

  @ViewChildren(MatMenuTrigger) menuTriggerList: QueryList<MatMenuTrigger>;

  @ViewChild('profileContextMenu', { static: true })
  profileContextMenu: MatMenu;

  profileContextMenuPosition = { x: '0px', y: '0px' };

  @ViewChild('groupContextMenu', { static: true })
  groupContextMenu: MatMenu;

  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() {
    const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
      KEY_VER_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));
        })
      );
  }

  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: String(buddy.seq) }));
    this.logger.debug('onSelectBuddy', buddy);
  }

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

  onContextMenuProfile(params: {
    event: MouseEvent;
    userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
  }) {
    this.profileContextMenuPosition.x = params.event.clientX + 'px';
    this.profileContextMenuPosition.y = params.event.clientY + 'px';
    const profileContextMenuTrigger = this.menuTriggerList.toArray()[1];
    profileContextMenuTrigger.menuData = { userInfo: params.userInfo };
    profileContextMenuTrigger.openMenu();
  }

  onMoreGroup(params: { event: MouseEvent; group: GroupDetailData }) {
    this.groupContextMenuPosition.x = params.event.clientX + 'px';
    this.groupContextMenuPosition.y = params.event.clientY + 'px';
    const groupContextMenuTrigger = this.menuTriggerList.toArray()[2];
    groupContextMenuTrigger.menuData = { group: params.group };
    groupContextMenuTrigger.openMenu();
  }
}