// Provider
var Provider = ReactRedux.Provider

// Some data
var quotes = [
  'Look deep into nature, and then you will understand everything better.',
  'You can\'t blame gravity for falling in love',
  'Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.',
  'Try not to become a man of success, but rather try to become a man of value.',
  'Health is the greatest gift, contentment the greatest wealth, faithfulness the best relationship.',
  'Three things cannot be long hidden: the sun, the moon, and the truth.',
  'When I was young I thought that money was the most important thing in life; now that I am old I know that it is.',
  'No great artist ever sees things as they really are. If he did, he would cease to be an artist.'
];

// Default state
var notifyDefault = {
  display: false,
  message: ''
}

// Reducer
const notificationReducer = (state = notifyDefault, action) => {
  switch (action.type) {
    case 'SHOW_NOTIFICATION':
      return {
        display: true,
        message: action.message ? action.message : quotes[Math.floor(Math.random()*quotes.length)]
      };
    case 'HIDE_NOTIFICATION':
      return {
        display: false,
        message: state.message
      };
    default:
      return state;
  }
}

// Store
var notificationStore = Redux.createStore(notificationReducer)

/* React component */

class NotificationBox extends React.Component {
  render() {
    var notifyClass = "notification";
    if (this.props.notify.display) {
      notifyClass += " show";
    }
    return (
      <div className={notifyClass}>
      {this.props.notify.message}
      </div>
    )
  } 
}
// Connect NotificationBox component with store
var NotificationBoxComponent = ReactRedux.connect(
  state => ({notify: state})
)(NotificationBox);


class App extends React.Component {
  showNotify() {
    notificationStore.dispatch({
      type: 'SHOW_NOTIFICATION'
    })
    
    setTimeout(function() {
      notificationStore.dispatch({
        type: 'HIDE_NOTIFICATION'
      })
    }, 3000)
  }
  
  showCustomNotify() {
    notificationStore.dispatch({
      type: 'SHOW_NOTIFICATION',
      message: 'This is the custom message notification'
    })
    
    setTimeout(function() {
      notificationStore.dispatch({
        type: 'HIDE_NOTIFICATION'
      })
    }, 3000)
  }
  
  render() {
    return (
      <Provider store={notificationStore}>
        <div className="main">
          <button onClick={this.showNotify}>Show Quotes</button><br/>
          <button onClick={this.showCustomNotify}>Show Custom Message</button>
          <NotificationBoxComponent/>
        </div>
      </Provider>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))