const { createStore, bindActionCreators } = Redux;
const { Provider, connect } = ReactRedux;
const userList = [{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",phone:"1-770-736-8031 x56442",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",phone:"010-692-6593 x09125",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",phone:"1-463-123-4447",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",phone:"493-170-9623 x156",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",phone:"(254)954-1289",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",phone:"1-477-935-8478 x6430",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",phone:"210.067.6132",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",phone:"586.493.6943 x140",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",phone:"(775)976-6794 x41206",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",phone:"024-648-3804",website:"ambrose.net"}];

class App extends React.Component {
  componentDidMount = () => {
    this.props.getUsers();
  }
  
  handleChange = (event) => {
    this.props.selectUser(event.target.value);
  }
  
  render() {
    return (
      <div> 
        <Select onChange={this.handleChange} userList={this.props.userList} />
        <CurrentUser currentUser={this.props.currentUser} />
      </div>
    )
  }  
}

const Select = (props) => {
  renderOptions = () => (
    props.userList.map(user => 
      <option value={user.id} key={`user-${user.id}`}>{user.name}</option>
    )
  )
  
  return (
    <select onChange={props.onChange} defaultValue="">
      <option value="">Select an avatar</option>
      {this.renderOptions()}
    </select>
  ); 
}

const CurrentUser = (props) => {
  return (
    <div> 
      <p>{props.currentUser && JSON.stringify(props.currentUser)}</p>
    </div>
  )  
} 

/* --- REDUCERS --- */
function reducer(state, action) {
  switch (action.type) {
    case "GET_USERS":
      return {
        ...state,
        userList: action.userList
      }
    case "SELECT_USER":
      return {
        ...state,
        currentUser: state.userList.find(user => user.id == action.currentUser)
      }
    default:
      return state
  }
};

/* --- ACTION CREATORS --- */
const actionCreators = {
  getUsers: () => {
    return {
      type: "GET_USERS",
      userList
    }
  },
  selectUser: (currentUser) => {
    return {
      type: "SELECT_USER",
      currentUser
    }
  }
};

/* --- STORE --- */
const preloadedState = {userList: [], currentUser: null};
const store = createStore(reducer, preloadedState);

/* --- CONNECT --- */
const AppContainer = connect(
  function mapStateToProps(state, props) {
    return {
      userList: state.userList,
      currentUser: state.currentUser
    }
  },
  function mapDispatchToProps(dispatch) {
		return bindActionCreators(actionCreators, dispatch);
	}
)(App);

/* --- RENDER THE APP --- */
ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById("app")
);