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

@Component({
    selector: 'of-notification',
    templateUrl: './notification.component.html',
})
export class NotificationComponent implements OnInit, AfterContentInit, OnDestroy {

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

    pageSize = '10';
    totalLength = 0;
    currPage = 0;

    constructor(
        private router: Router,
        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.totalLength = page.totalElements;
                }
            },
            (error: RPCClientError) => {
                console.log(error.response.message);
            }
        );

        this.readSuccess$.subscribe(
            (noti: Notification) => {
                if (noti) {
                    this.getNotifications(this.currPage);
                }
            },
            (error: RPCClientError) => {
                console.log(error.response.message);
            }
        );
    }

    ngAfterContentInit() {
        this.getNotifications(this.currPage);
    }

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

    // updateData(noti: Notification) {
    //     for (let i = 0; i < this.notifications.length; i++) {
    //         const exist = this.notifications[i];
    //         if (exist.id === noti.id) {
    //             this.notifications[i] = noti;
    //             return;
    //         }
    //     }
    // }

    getNotifications(pageIndex: number) {
        this.listStore.select(AuthSelector.select('member')).subscribe(
            (member: Member) => {
                const pageParams: PageParams = {
                    pageNo: pageIndex + '',
                    countPerPage: this.pageSize,
                    sortCol: 'id',
                    sortDirection: 'descending'
                };
                this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
                this.currPage = pageIndex;
            },
            (error) => {
                console.log(error);
            }
        );
    }

    onRowSelect(event) {
        this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
        alert('Will redirect to ' + event.data.url);
        // this.router.navigate([n.url]);
    }

    onPaging(e) {
        this.getNotifications(e.page);
    }

    onMarkAllAsRead() {
        this.listStore.select(AuthSelector.select('member')).subscribe(
            (member: Member) => {
                const pageParams: PageParams = {
                    pageNo: this.currPage + '',
                    countPerPage: this.pageSize,
                    sortCol: 'id',
                    sortDirection: 'descending'
                };
                this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
            },
            (error) => {
                console.log(error);
            }
        );
    }
}
