import React from 'react'
import { Alert } from 'react-bootstrap'

class AlertView extends React.Component {
  constructor () {
    super()
    this.handleDismiss = this.handleDismiss.bind(this)
  }

  handleDismiss (event) {
    event.preventDefault()
    const { alertDismiss, index } = this.props
    alertDismiss(index)
  }

  render () {
    const { data } = this.props
    let alertIcon = ''
    if (data.severity === 'info') {
      alertIcon = 'glyphicon glyphicon-info-sign'
    }
    if (data.severity === 'warning' || data.severity === 'danger') {
      alertIcon = 'glyphicon glyphicon-remove-sign'
    }
    if (data.severity === 'success') {
      alertIcon = 'glyphicon glyphicon-ok-sign'
    }
    return (
      <Alert bsStyle={data.severity} onDismiss={this.handleDismiss}>
        <p><span className={alertIcon} /> {data.text}</p>
      </Alert>
    )
  }
}

class AlertList extends React.Component {
  render () {
    const { alerts } = this.props.alerts
    const { alertDismiss } = this.props.alertsActions

    if (alerts.length > 0) {
      return (
        <div className='alert-list'>
          {alerts.map((data, key) => <AlertView key={key} index={key} data={data} alertDismiss={alertDismiss} />)}
        </div>
      )
    } else {
      return null
    }
  } 
}

export default AlertList
