const DrawerContent = (props) => {
  return (
    <ScrollView style={styles.container}>
      <View
        style={styles.drawerHeader}
      >
        <Image
          style={{ width: responsiveHeight(10), height: responsiveHeight(10), borderRadius: 25 }}
          source={require('../res/img/profile/profile_default.jpg')}
        />

        <View>
          <Text style={{ color: GLOBAL.COLOR.WHITE, fontSize: GLOBAL.FONT.SMALL }}>
            [##I WANT TO PUT STATE VALUE HERE##]
          </Text>
          <Text style={{ color: GLOBAL.COLOR.WHITE, fontSize: GLOBAL.FONT.SMALL }}>
            [##I WANT TO PUT STATE VALUE HERE##]
          </Text>
        </View>

      </View>
      <DrawerItems {...props} />
    </ScrollView>
  );
};

//Drawer Navigator for Members area Screen.
const DrawerMenu = DrawerNavigator(
  {
    HomeScreen: {
      path: '/',
      screen: HomeView
    },
    ProfileScreen: {
      path: '/profile',
      screen: ProfileView
    },
  },
  {
    initialRouteName: 'HomeScreen',
    contentComponent: DrawerContent,
    contentOptions: {
      activeTintColor: GLOBAL.COLOR.PRIMARY,
        style: {
          zIndex: 100,
          //paddingTop: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
        }
    },
  }
);

const initialState = {
  isLoggedIn: false,
  errorMsg: '',
  username: '',     //THIS IS WHAT I NEED TO READ
  password: '',
};

export default function login(state = initialState, action = {}) {
  switch (action.type) {
    case types.SUBMIT_LOGIN: {
      return {
        ...state,
        isLoggedIn: action.payload.loginStatus,
        username: action.payload.username,
        password: action.payload.password,
        errorMsg: action.payload.updatedErrMsg
      };
    }
    case types.CHANGE_USERNAME:
      return {
        ...state,
        username: action.username
      };
    case types.CHANGE_PASSWORD:
      return {
        ...state,
        password: action.password
      };
    default:
      return state;
  }
}