// console.log(axios)
const { createStore, applyMiddleware } = Redux;
const { Provider, connect } = ReactRedux
const thunk = ReduxThunk.default

const loadLorem = () => {
  return (dispatch) => {
    // console.log("****")
    axios.get("https://baconipsum.com/api/?type=all-meat&sentences=1&start-with-lorem=0")
      .then(response => {
        // console.log(response.data)
        dispatch({type: 'CHANGE_SENTENCE', sentence: response.data[0]})
      }
    )
  }
}

const defaultState = {
  sentence: "Waiting for load"
}

const mainReducer = (prevState = defaultState, action) => {
  if (action.type === "CHANGE_SENTENCE") {
    return {...prevState, sentence: action.sentence}
  }
  else if (action.type === "TEST") {
    return {...prevState, sentence: action.value}
  }
  else {
    return prevState
  }
}

const MessageBox = (props) => {
  return <div>{ props.message }</div>
}



const mapStateToProps = state => state
const actionsCreators = {
  loadLorem: loadLorem,
  testAction: () => ({type: 'TEST', value: 'VALUE'})
}

const store = createStore(mainReducer, applyMiddleware(thunk))
// const store = createStore(mainReducer)


const App = (props) => {
  return <div>
    <button onClick={props.loadLorem}>LOAD_LOREM</button>
    <button onClick={props.testAction}>TEST</button>
    <MessageBox message={props.sentence}/>
  </div>
}

const AppConnected = connect(mapStateToProps, actionsCreators)(App)
// const AppConnected = connect(mapStateToProps, mapDispatchToProps)(App)



ReactDOM.render(<Provider store={store}><AppConnected sentence="Lorem" /></Provider>, document.getElementById('root'));