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

export default class Setting extends Component {
    toSuggestion = () => {
        const { navigation } = this.props;
        navigation.navigate("Suggestion")
    }
    toUserAgree = () => {
        const { navigation } = this.props;
        navigation.navigate("UserAgree")
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.formArea}>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            disabled={true}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>我的资料</Text>
                                <AntDesign
                                    name={"right"}
                                    size={20}
                                    style={{ color: "#999999" }}
                                />
                            </View>
                        </RNPickerSelect>
                    </View>
                    <TouchableOpacity onPress={this.toSuggestion}>
                        <View style={styles.formItem}>
                            {/* <RNPickerSelect
                            placeholder={""}
                            disabled={true}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        > */}
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>用户反馈</Text>
                                <AntDesign
                                    name={"right"}
                                    size={20}
                                    style={{ color: "#999999" }}
                                />
                            </View>
                            {/* </RNPickerSelect> */}
                        </View>

                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.toUserAgree}>
                        <View style={styles.formItem}>
                            {/* <RNPickerSelect
                            placeholder={""}
                            disabled={true}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        > */}
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>用户及隐私协议</Text>
                                <AntDesign
                                    name={"right"}
                                    size={20}
                                    style={{ color: "#999999" }}
                                />
                            </View>
                            {/* </RNPickerSelect> */}
                        </View>
                    </TouchableOpacity>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>清除缓存</Text>
                                <AntDesign
                                    name={"right"}
                                    size={20}
                                    style={{ color: "#999999" }}
                                />
                            </View>
                        </RNPickerSelect>
                    </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,
        alignItems: "center"
    },
    formArea: {
        width: "100%"
    },
    formItem: {
        width: "100%",
        height: unitHeight * 97,
        backgroundColor: "#fff",
        marginBottom: unitHeight * 6,
    },
    itemArea: {
        width: "100%",
        height: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 24,
        borderBottomColor: "#F9F9F9",
        borderBottomWidth: 1
    },
    bottomBtn: {
        width: "100%",
        marginTop: unitHeight * 196,
        height: unitHeight * 84,
        justifyContent: 'center',
        alignItems: 'center'
    },
})