import { UserSelectDialogType } from '../../../types/userselect.dialog.type';
import {
  Component,
  OnInit,
  Output,
  EventEmitter,
  ViewChildren,
  QueryList,
  ElementRef,
  OnDestroy,
  ViewChild
} from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
import {
  CreateChatDialogComponent,
  CreateChatDialogData,
  CreateChatDialogResult
} from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
import { Subscription, Observable, merge } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import * as MessageStore from '@app/store/messenger/message';
import * as SyncStore from '@app/store/messenger/sync';
import * as SettingsStore from '@app/store/messenger/settings';
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN
} from '@ucap-webmessenger/protocol-query';
import { MatTabChangeEvent } from '@angular/material';
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy';
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
import { MessageType } from '@ucap-webmessenger/api-message';
import { tap } from 'rxjs/operators';
import {
  MessageWriteDialogComponent,
  MessageWriteDialogResult,
  MessageWriteDialogData
} from '../dialogs/message/message-write.dialog.component';
import {
  EnvironmentsInfo,
  KEY_ENVIRONMENTS_INFO,
  KEY_VER_INFO,
  MainMenu
} from '@app/types';
import { MessageBoxComponent } from './left-sidenav/message.component';
import { environment } from '../../../../environments/environment';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-layout-messenger-left-nav',
  templateUrl: './left-nav.component.html',
  styleUrls: ['./left-nav.component.scss'],
  animations: ucapAnimations
})
export class LeftNaviComponent implements OnInit, OnDestroy {
  badgeChatUnReadCount: number;
  badgeChatUnReadCountSubscription: Subscription;
  badgeMessageUnReadCount$: Observable<number>;
  badgeMessageInterval: any;

  MainMenu = MainMenu;

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

  ngOnInit() {
    this.badgeChatUnReadCountSubscription = this.store
      .pipe(
        select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
      )
      .subscribe(count => {
        this.badgeChatUnReadCount = count;
      });

    /** About Message Badge */
    this.badgeMessageUnReadCount$ = this.store.pipe(
      select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount)
    );

    this.getMessageUnreadCount();
    this.badgeMessageInterval = setInterval(
      () => this.getMessageUnreadCount(),
      5 * 60 * 1000
    );
  }

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

    if (!!this.badgeMessageInterval) {
      clearInterval(this.badgeMessageInterval);
    }

    this.logger.debug('-----------------------LeftNaviComponent ngOnDestroy');
  }

  onSelectedTabChange(event: MatTabChangeEvent) {
    this.store.dispatch(
      SettingsStore.selectedGnbMenuIndex({
        menuIndex: event.tab.ariaLabel as MainMenu
      })
    );
  }

  getMessageUnreadCount(): void {
    this.store.dispatch(MessageStore.retrieveUnreadCount({}));
  }
}