import React from 'react'
import {NotificationStack} from 'react-notification'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import _ from 'underscore'
import actions from '../actions'

@connect(state => ({
  alerts: state.alerts
}))
export default class extends React.Component {
  actions = bindActionCreators(
    actions({
      dismissAlert: 'dismiss'
    }),
    this.props.dispatch
  )

  defaultStyleFactory(index, style) {
    return _.extend(style, {bottom: '28px'})
  }

  render() {
    const defaults = {
      dismissAfter: 2000,
      action: 'Close',
      onClick: (notification, deactivate) => {
        deactivate();
        this.actions.dismiss(notification.key);
      }
    };

    for (let alert of this.props.alerts) {
      _.extend(alert, defaults);
    }
    return (
      <NotificationStack
        dismissAfter={true}
        barStyleFactory={this.defaultStyleFactory}
        notifications={this.props.alerts}
        onDismiss={this.actions.dismiss}
      />
    )
  }
}