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/protocol';
import { Notification } from '../../model';
import * as ListStore from '../../store/list';
import * as DetailStore from '../../store/detail';
import { ReadAllByMemberSelector, ReadSelector } from '../../store';
import { AuthSelector } from 'packages/member/store';
import { Member } from '../../../member/model';
import { PageParams, Page } from 'app/commons/model';
import { MarkAsRead } from '../../store/detail';

@Component({
  selector: 'of-notification-badge',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})
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']);
  }
}