import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions, ScrollView, Text } from 'react-native';
import { connect } from 'react-redux';
import PickerComponent from '../../../components/pickerComponent';


const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
// create a component
@connect(({ userInfo }) => ({ userInfo }))
class UserInfoHomeScreen extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#06C1AE' }}>
        <View style={{ position: 'absolute', width, height, backgroundColor: '#06C1AE' }} />
        <ScrollView>
          <View style={styles.header}>
            <View style={styles.userContainer}>
              <Text style={styles.avatar} />
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={{ color: 'white' }}>素敌</Text>
                  <Text style={{ marginLeft: 4 }} />
                </View>
                <Text style={{ color: 'white', marginTop: 4 }}>个人信息</Text>
              </View>
            </View>
            <PickerComponent />
          </View>
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    backgroundColor: '#06C1AE',
    paddingBottom: 20,
  },
  icon: {
    width: 27,
    height: 27,
  },
  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  avatar: {
    width: 50,
    height: 50,
    marginRight: 10,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: '#51D3C6',
  },
});
export default UserInfoHomeScreen;
