// @flow
import React, { Component } from 'react';
import cx from 'classnames';
import Dropdown from '../Dropdown';
import Icon from '../Icon';
import { activityRenderers } from '../Feed';
import Time from 'app/components/Time';
import styles from './HeaderNotifications.css';
import { Link } from 'react-router';

type Props = {
  notificationsData: Object,
  fetchNotifications: () => void,
  notifications: Array<Object>,
  markAllNotifications: () => Promise<void>,
  markNotification: number => Promise<void>,
  fetchNotificationData: () => Promise<void>
};

type State = {
  notificationsOpen: boolean
};

const NotificationElement = ({
  notification,
  markNotification
}: {
  notification: Object,
  markNotification: number => void
}) => {
  const renders = activityRenderers[notification.verb];

  if (renders) {
    return (
      <div
        className={cx(
          styles.notification,
          !notification.read ? styles.unRead : null
        )}
        onClick={() => markNotification(notification.id)}
      >
        <div className={styles.innerNotification}>
          <div className={styles.icon}>{renders.icon(notification)}</div>
          <div>
            {renders.activityHeader(notification)}
            <Time
              time={notification.updatedAt}
              wordsAgo
              style={{ margin: '0', display: 'block' }}
            />
          </div>
        </div>
      </div>
    );
  }
  return null;
};

export default class NotificationsDropdown extends Component<Props, State> {
  state: State = {
    notificationsOpen: false
  };

  seeAll = () => {
    this.setState({ notificationsOpen: false });
    this.props.markAllNotifications().then(this.fetch);
  };

  markNotification = (notificationId: number) => {
    this.setState({ notificationsOpen: false });
    this.props.markNotification(notificationId).then(this.fetch);
  };

  fetch = () => {
    this.props.fetchNotifications();
    this.props.fetchNotificationData();
  };

  renderNotifications = (notifications: Array<Object>) => {
    return (
      <div>
        {notifications.map((notification, i) => (
          <NotificationElement
            key={i}
            notification={notification}
            markNotification={this.markNotification}
          />
        ))}
      </div>
    );
  };

  render() {
    const { notificationsData, fetchNotifications, notifications } = this.props;
    const { unreadCount } = notificationsData;

    return (
      <Dropdown
        show={this.state.notificationsOpen}
        toggle={() =>
          this.setState(
            {
              notificationsOpen: !this.state.notificationsOpen
            },
            () => (this.state.notificationsOpen ? fetchNotifications() : null)
          )}
        triggerComponent={
          <Icon.Badge name="notifications" size={30} badgeCount={unreadCount} />
        }
        contentClassName={styles.notifications}
      >
        {/* TODO FIXME - do same as the menu element*/}
        {notifications.length ? (
          <div style={{ width: '100%' }}>
            <div style={{ maxHeight: '300px', overflowY: 'overlay' }}>
              {this.renderNotifications(notifications)}
            </div>
            <div className={styles.seeAllWrapper}>
              <Link onClick={this.seeAll} className={styles.seeAll}>
                Marker alle som sett
              </Link>
            </div>
          </div>
        ) : (
          <h2 style={{ padding: '10px' }}>Ingen varslinger</h2>
        )}
      </Dropdown>
    );
  }
}

@@ -273,45 +273,8 @@
 ss';
-%0Aimport %7B Link %7D from 'react-router';
 %0A%0Aty
@@ -944,16 +944,27 @@
 =%7B() =%3E 
+this.props.
 markNoti
@@ -1535,24 +1535,52 @@
 cationsOpen:
+ false,%0A    hideUnreadCount:
  false%0A  %7D;%0A
@@ -2651,16 +2651,53 @@
 ionsOpen
+,%0A              hideUnreadCount: true
 %0A       
@@ -2721,18 +2721,31 @@
    () =%3E
+%0A             
  
-(
 this.sta
@@ -2764,16 +2764,32 @@
 ionsOpen
+%0A               
  ? fetch
@@ -2803,23 +2803,84 @@
 ations()
- : null
+%0A                : this.props.markAllNotifications().then(this.fetch
 )%0A      
@@ -2934,16 +2934,28 @@
 on.Badge
+%0A           
  name=%22n
@@ -2971,31 +2971,86 @@
 ons%22
- size=%7B30%7D badgeCount=%7B
+%0A            size=%7B30%7D%0A            badgeCount=%7B!this.state.hideUnreadCount && 
 unre
@@ -3057,16 +3057,26 @@
 adCount%7D
+%0A         
  /%3E%0A    
@@ -3419,206 +3419,8 @@
 iv%3E%0A
-            %3Cdiv className=%7Bstyles.seeAllWrapper%7D%3E%0A              %3CLink onClick=%7Bthis.seeAll%7D className=%7Bstyles.seeAll%7D%3E%0A                Marker alle som sett%0A              %3C/Link%3E%0A            %3C/div%3E%0A
     

Mark notifications as read after opening notification box