import React, { Component } from "react"
import { StyleSheet, Text, View, TextInput } from "react-native"
import RNPickerSelect from 'react-native-picker-select';
import { unitWidth, unitHeight, getStatusBarHeight } from "../utils/AdapterUtil";
import MyButtom from '../component/MyButton'

export default class Register1 extends Component {
    state = {
        placeholderText: {
            label: '1990-01-01',
            value: null,
            color: '#333333',
        },
        placeholderText2: {
            label: '山东-烟台-莱山区',
            value: null,
            color: '#333333',
        },
        placeholderText3: {
            label: '165',
            value: null,
            color: '#333333',
        },

    };
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的性别</Text>
                    <View style={styles.item}>
                        <View style={styles.itemOnceColor}>
                            <Text style={styles.itemOnceTextColor}>
                                男
                            </Text>
                        </View>
                        <View style={styles.itemOnce}>
                            <Text style={styles.itemOnceText}>
                                女
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请输入您的昵称</Text>
                    <View style={styles.item}>
                        <TextInput
                            placeholder="请输入手机号"
                            placeholderTextColor={"#999999"}
                            style={styles.TextInput}
                        />
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的生日</Text>
                    <View style={styles.selectItem}>
                        <RNPickerSelect
                            placeholder={this.state.placeholderText}
                            placeholderTextColor={"#333333"}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        />
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的常居地</Text>
                    <View style={styles.selectItem}>
                        <RNPickerSelect
                            placeholder={this.state.placeholderText2}
                            placeholderTextColor={"#333333"}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        />
                    </View>
                </View>
                <View style={styles.itemArea}>
                    <Text style={styles.itemTitle}>请选择您的身高</Text>
                    <View style={styles.selectItem}>
                        <RNPickerSelect
                            placeholder={this.state.placeholderText3}
                            placeholderTextColor={"#333333"}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        />
                    </View>
                </View>
                <View style={styles.bottomBtn}>
                    <MyButtom
                        text={"下一步"}
                        width={unitWidth * 502}
                        height={unitHeight * 84}
                        borderRadius={unitHeight * 84}
                        bgColor="#FA788A"
                        shadowBgc="rgba(250,120,138,1)"
                        style={{ fontSize: unitWidth * 32 }}
                    />
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: getStatusBarHeight() + unitHeight * 30,
        paddingLeft: unitWidth * 60,
        paddingRight: unitWidth * 60,
    },
    itemArea: {
        width: "100%"
    },
    itemTitle: {
        fontSize: unitWidth * 28,
        color: "#333333"
    },
    item: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: unitHeight * 35,
        marginBottom: unitHeight * 46
    },
    selectItem: {
        width: "100%",
        height: unitHeight * 68,
        marginTop: unitHeight * 35,
        borderRadius: unitHeight * 68,
        justifyContent: "center",
        paddingLeft: unitWidth * 50,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc",
        marginBottom: unitHeight * 46
    },
    itemOnce: {
        width: unitWidth * 252,
        height: unitHeight * 68,
        borderRadius: unitHeight * 68,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff",
        borderWidth: unitWidth * 1,
        borderColor: "#ccc"
    },
    itemOnceColor: {
        borderRadius: unitHeight * 68,
        backgroundColor: "#FA788A",
        width: unitWidth * 252,
        height: unitHeight * 68,
        justifyContent: "center",
        alignItems: "center"
    },
    itemOnceTextColor: {
        fontSize: unitWidth * 28,
        color: "#fff"
    },
    itemOnceText: {
        fontSize: unitWidth * 28,
        color: "#333333"
    },
    TextInput: {
        width: "100%",
        height: unitHeight * 78,
        borderRadius: unitHeight * 78,
        fontSize: unitWidth * 28,
        paddingLeft: unitWidth * 50,
        borderWidth: unitWidth * 1,
        borderColor: "#ccc"
    },
    seletItem: {
        width: "100%",
        height: unitHeight * 78,
        backgroundColor: "#f00"
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 80,
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center'
    }

})