import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
  addNotification as notify,
  updateNotification
} from '../../../../index';

class NotificationExamples extends Component {
  static propTypes = {
    notify: React.PropTypes.func.isRequired,
    updateNotification: React.PropTypes.func.isRequired
  };
  
  /**
   * Bind methods
   * @param {Object} props
   * @returns {void}
   */
  constructor(props) {
    super(props);
    this._notificationUpdatedExample = this._notificationUpdatedExample.bind(this);
    this._notificationWithImage = this._notificationWithImage.bind(this);
  }

  /**
   * Example of a notification updated
   * @returns {void}
   * @private
   */
  _notificationUpdatedExample() {
    const {notify, updateNotification} = this.props;
    let notif = notify({
      title: 'Upload status',
      message: 'Your file is uploading...',
      status: 'info',
      dismissible: false,
      dismissAfter: 0,
      buttons: [{
        name: 'OK',
        primary: true,
        onClick: function() {
          alert('You clicked on OK button.');
        }
      }]

    });
    setTimeout(function() {
      notif.status = 'success';
      notif.message = 'Your file has been successfully uploaded';
      notif.dismissible = true;
      notif.dismissAfter = 5000;
      notif.buttons = [{
        name: 'OK',
        primary: true,
        onClick: function() {
          alert('You clicked on OK button.');
        }
      }, {
        name: 'Details',
        onClick: function() {
          alert('You clicked on Details button.');
        }

      }];
      updateNotification(notif);
    }, 3000);
  }

  /**
   * Example of a notification with an image
   * @returns {void}
   * @private
   */
  _notificationWithImage() {
    const {notify} = this.props;
    notify({
      title: 'Steve Frizeli added you',
      message: 'Do you want to accept him as friend?',
      image: '/static/images/image-2.png',
      dismissible: false,
      dismissAfter: 0,
      buttons: [{
        name: 'Yes',
        primary: true
      }, {
        name: 'No'
      }],
      allowHTML: true
    });
  }

  /**
   * Render form
   * @returns {XML}
   */
  render() {
    return (
      <div>
        <button className='btn btn-primary btn-block' onClick={this._notificationUpdatedExample}>
          Notification updated example
        </button>
        <button className='btn btn-primary btn-block' onClick={this._notificationWithImage}>
          Notification with image
        </button>
      </div>
    );
  }
}

export default connect(null, {notify, updateNotification})(NotificationExamples);

@@ -1812,24 +1812,106 @@
 this.props;%0A
+    let path = window.location.href;%0A    path = path.replace(/index%5C.html/, '');%0A%0A
     notify(%7B
@@ -2023,10 +2023,16 @@
 ge: 
-'/
+%60$%7Bpath%7D
 stat
@@ -2052,17 +2052,17 @@
 ge-2.png
-'
+%60
 ,%0A      

fix bug in the demo - image was not appearing on Notification with image