import {
  Component,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { ucapAnimations } from '@ucap-webmessenger/ui';
import { Subscription, Observable, } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as AppStore from '@app/store';
import * as MessageStore from '@app/store/messenger/message';
import * as SettingsStore from '@app/store/messenger/settings';
import { MatTabChangeEvent } from '@angular/material';
import {
  MainMenu
} from '@app/types';

@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({}));
  }
}