import React, { createContext, useReducer, useContext, Fragment } from 'react';
import './App.css';

const authReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        age: state.age + 1
      };
    case 'login':
      const { name } = action;
      return {
        ...state,
        name,
      };
    default:
      return state;
  }
}

const AuthContext = createContext(null);

const AuthProvider = ({
  children
}) => {
  const [state, dispatch] = useReducer(authReducer, {
    name: 'yang',
    age: 11,
  });
  return (
    <AuthContext.Provider value={{ state, dispatch }} >
      {children}
    </AuthContext.Provider>
  )
}

const NameLabel = (props) => {
  const { state, dispatch } = useContext(AuthContext);

  return (
    <Fragment>
      <p>{state.name} @ {state.age}</p>
      <p>{props.label}</p>
      <button onClick={() => dispatch({ type: 'increment' })}> increment </button>
      <button onClick={() => dispatch({ type: 'login', name: Math.random().toString(16) })}> chang name </button>
    </Fragment>
  )
}

function App() {
  return (
    <AuthProvider>
      <NameLabel label="example" />
    </AuthProvider>
  );
}

export default App;