import React, { Component } from 'react'
import PropTypes from 'prop-types'

import onClickOutsideAddon from 'react-onclickoutside'
import Notification from '../Notification'
import Loading from '../Loading'

class NotificationBox extends Component {

  static propTypes = {
    notifications: PropTypes.array,
    fetchNotifications: PropTypes.func.isRequired,
    toggleNotificationsBox: PropTypes.func.isRequired,
    markAsRead: PropTypes.func.isRequired,
    markAsUnread: PropTypes.func.isRequired
  }

  componentDidMount = () => {
    const { notifications, fetchNotifications } = this.props
    if (!notifications) {
      fetchNotifications()
    }
  }

  handleClickOutside = () => {
    this.props.toggleNotificationsBox()
  }

  render = () => {
    const { notifications, markAsRead, markAsUnread } = this.props
    const empty = notifications && notifications.length === 0
    return <div className='notificationsBox'>
      <div className='notificationsBoxTriangle' />
      <ul className='notifications'>
        {!notifications && <li><Loading margin='30px auto' /></li>}
        {empty && <li className='notificationsEmpty'>
          You have no notifications. <br />
          More time for dancing.
        </li>}
        {notifications && notifications.slice(0, 10).map(n => {
          return <Notification notification={n}
            markAsRead={markAsRead}
            markAsUnread={markAsUnread}
            key={`notification-${n.id}`} />
        })}
      </ul>
      {notifications && !empty && <a href='/notifications'
        className='notificationsBoxSeeAll'>
        See all
      </a>}
    </div>
  }
}

export default onClickOutsideAddon(NotificationBox)

@@ -1098,18 +1098,29 @@
  %7Bempty 
-&&
+? (%0A         
  %3Cli cla
@@ -1158,16 +1158,18 @@
         
+  
 You have
@@ -1204,16 +1204,18 @@
         
+  
 More tim
@@ -1237,22 +1237,23 @@
         
+ 
+ 
 %3C/li%3E
-%7D
 %0A       
@@ -1253,33 +1253,31 @@
         
-%7Bnotifications &&
+) : (%0A         
  notific
@@ -1308,27 +1308,8 @@
 n =%3E
- %7B%0A          return
  %3CNo
@@ -1344,24 +1344,26 @@
             
+  
 markAsRead=%7B
@@ -1370,24 +1370,26 @@
 markAsRead%7D%0A
+  
             
@@ -1428,16 +1428,18 @@
         
+  
 key=%7B%60no
@@ -1461,16 +1461,17 @@
 id%7D%60%7D /%3E
+)
 %0A       
@@ -1471,17 +1471,16 @@
         
-%7D
 )%7D%0A     

refactor for clarity