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

@Component({
  selector: 'of-notification-badge',
  templateUrl: './notification.component.html',
})
export class NotificationBadgeComponent implements OnInit, AfterContentInit {
  notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
  mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
  isOpen = false;
  notifications: Notification[] = null;
  badgeCount = 0;


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

  ngOnInit() {
    // this.notification$.subscribe(
    //   (page: Page) => {
    //     if (page !== null) {
    //       this.notifications = page.content;
    //       this.getUnconfirmedCount(this.notifications);
    //     }
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error.response.message);
    //   }
    // );
    this.mark$.subscribe(
      (n: Notification) => {
        if (n !== null && n.confirmDate !== null) {
          this.getNotifications(0);
        }
      },
      (error: RPCClientError) => {
        console.log(error.response.message);
      }
    );
  }

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

  getNotifications(pageIndex: number) {
    // 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);
    //   }
    // );
  }

  getUnconfirmedCount(notifications: Notification[]) {
    let totalCnt = 0;
    notifications.map( function(v, i) {
      if (v.confirmDate === null) {
        totalCnt += 1;
      }
    });
    this.badgeCount = totalCnt;
  }


  mark(notification: Notification, e: Event) {
    this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
    e.stopPropagation();
  }

  handleClick(n: Notification) {
    alert('Will redirect to ' + n.url);
  }

  handleMarkAllAsRead() {

    // 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.MarkAllAsRead({ member, pageParams }));
    //   },
    //   (error) => {
    //     console.log(error);
    //   }
    // );
  }

  handleViewAll() {
    this.isOpen = false;
    this.router.navigate(['notification']);
  }
}