import React from 'react'
import PropTypes from 'prop-types'

import { connect } from 'react-redux'

import style from './style.css'

import Time from '../Time'

import { clearUserMessages } from '../../actions/vm'
import { hrefWithoutHistory } from '../../helpers'
import { msg } from '../../intl'

const UserMessage = ({ record }) => {
  // TODO: render record.type
  return (
    <li className={`list-group-item ${style.crop}`} title={record.message} data-toggle='tooltip'>
      <span>
        <pre className={style['message-box']}>
          <Time time={record.time} cssClass={style['usermsg-time']} />
          {record.message}
        </pre>
      </span>
    </li>
  )
}
UserMessage.propTypes = {
  record: PropTypes.object.isRequired,
}

const ContactAdminInfo = ({ userMessages }) => {
  if (userMessages.get('records').size === 0) {
    return null
  }

  return (
    <div className={style['contact-admin']}>
      Contact your administrator in case of issues
    </div>
  )
}
ContactAdminInfo.propTypes = {
  userMessages: PropTypes.object.isRequired,
}

class VmUserMessages extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      show: false,
    }
  }

  render () {
    const { userMessages, onClearMessages } = this.props

    const onToggle = () => {
      this.setState({ show: !this.state.show })
    }

    let show = ''
    if (this.state.show) {
      show = 'show'
    }

    return (
      <li className='dropdown'>
        <a className='dropdown-toggle nav-item-iconic' href='#' title={msg.messages()} onClick={hrefWithoutHistory(onToggle)}>
          <i className='fa fa-bell' />
          <span className='badge'>{userMessages.get('records').size}</span>
          <span className='caret' />
        </a>

        <div className={`dropdown-menu dropdown-menu-right infotip bottom-right ${show}`}>
          <div className={`arrow ${style['fix-arrow-position']}`} />

          <ul className={`list-group ${style['messages-list']}`}>
            {userMessages.get('records').map(r => (<UserMessage key={r.time} record={r} />))}
          </ul>
          <ContactAdminInfo userMessages={userMessages} />

          <div className='footer'>
            <a href='#' onClick={hrefWithoutHistory(onClearMessages)}>{msg.clearMessages()}</a>
            <a href='#' onClick={hrefWithoutHistory(onToggle)} className={style['close-button']}>{msg.close()}</a>
          </div>
        </div>
      </li>
    )
  }
}
VmUserMessages.propTypes = {
  userMessages: PropTypes.object.isRequired,
  onClearMessages: PropTypes.func.isRequired,
}

export default connect(
  (state) => ({
    userMessages: state.userMessages,
  }),
  (dispatch) => ({
    onClearMessages: () => dispatch(clearUserMessages()),
  })
)(VmUserMessages)

@@ -322,16 +322,20 @@
 %7B record
+, id
  %7D) =%3E %7B
@@ -532,16 +532,24 @@
 e-box'%5D%7D
+ id=%7Bid%7D
 %3E%0A      
@@ -746,24 +746,48 @@
 isRequired,%0A
+  id: PropTypes.string,%0A
 %7D%0A%0Aconst Con
@@ -817,16 +817,20 @@
 Messages
+, id
  %7D) =%3E %7B
@@ -953,16 +953,24 @@
 admin'%5D%7D
+ id=%7Bid%7D
 %3E%0A      
@@ -1107,16 +1107,40 @@
 quired,%0A
+  id: PropTypes.string,%0A
 %7D%0A%0Aclass
@@ -1343,16 +1343,48 @@
 .props%0A%0A
+    const idPrefix = %60usermsgs%60%0A
     cons
@@ -1527,24 +1527,46 @@
 how'%0A    %7D%0A%0A
+    let idCounter = 0%0A
     return (
@@ -1723,16 +1723,42 @@
 Toggle)%7D
+ id=%7B%60$%7BidPrefix%7D-toggle%60%7D
 %3E%0A      
@@ -1823,16 +1823,40 @@
 ='badge'
+ id=%7B%60$%7BidPrefix%7D-size%60%7D
 %3E%7BuserMe
@@ -1923,16 +1923,41 @@
 ='caret'
+ id=%7B%60$%7BidPrefix%7D-caret%60%7D
  /%3E%0A    
@@ -2280,16 +2280,54 @@
 cord=%7Br%7D
+ id=%7B%60$%7BidPrefix%7D-msg-$%7BidCounter++%7D%60%7D
  /%3E))%7D%0A 
@@ -2396,16 +2396,43 @@
 essages%7D
+ id=%7B%60$%7BidPrefix%7D-contact%60%7D
  /%3E%0A%0A   
@@ -2532,16 +2532,41 @@
 ssages)%7D
+ id=%7B%60$%7BidPrefix%7D-clear%60%7D
 %3E%7Bmsg.cl
@@ -2680,16 +2680,41 @@
 utton'%5D%7D
+ id=%7B%60$%7BidPrefix%7D-close%60%7D
 %3E%7Bmsg.cl

Add HTML IDs to VmsUserMessages