import { Component, Injectable, OnInit, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import * as ListStore from 'packages/notification/store/list';
import * as DetailStore from 'packages/notification/store/detail';
import { Store, select } from '@ngrx/store';
import { ReadAllByMemberSelector, ReadSelector } from 'packages/notification/store';
import { Page, PageParams } from '../../../model';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { AuthSelector } from 'packages/member/store';
import { Member } from '@overflow/commons-typescript/model/member';
import { PagesComponent } from 'app/pages/pages.component';
import { Notification } from '@overflow/commons-typescript/model/notification';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'of-notification-menu',
    templateUrl: './app.notification.component.html'
})

export class AppNotificationComponent implements OnInit, AfterContentInit, OnDestroy {

    notificationSubscription$: Subscription;
    notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
    notifications: Notification[];

    @Output() notificationLoaded = new EventEmitter<number>();

    constructor(
        private router: Router,
        private app: PagesComponent,
        private listStore: Store<ListStore.State>,
        private detailStore: Store<DetailStore.State>,
    ) {
    }

    ngOnInit() {
        this.notificationSubscription$ = this.notification$.subscribe(
            (page: Page) => {
                if (page !== null) {
                    this.notifications = page.content;
                    this.getUnconfirmedCount();
                }
            },
            (error: RPCClientError) => {
                console.log(error.response.message);
            }
        );
    }

    ngAfterContentInit() {
        this.listStore.select(AuthSelector.select('member')).subscribe(
            (member: Member) => {
              const pageParams: PageParams = {
                pageNo: '0',
                countPerPage: '10',
                sortCol: 'id',
                sortDirection: 'descending'
              };
              this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
            },
            (error) => {
              console.log(error);
            }
          );
    }

    ngOnDestroy() {
        if (this.notificationSubscription$) {
            this.notificationSubscription$.unsubscribe();
        }
    }

    getUnconfirmedCount() {
        if (this.notifications === null || this.notifications.length === 0) {
            return;
        }
        let totalCnt = 0;
        for (let i = 0; i < 5; i ++) {
            if (!this.notifications[i].confirmDate) {
                totalCnt += 1;
            }
        }
        this.notificationLoaded.emit(totalCnt);
      }

    onViewAllClick() {
        this.router.navigate(['notification']);
    }

    onNotiClick(notification: Notification) {
        this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
        alert('Will redirect to ' + notification.url);
    }
}
