import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
import { ArticleItem } from '../components/article/ArticleItem';

export default function Register() {
    const [selectedDay, setSelectedDay] = useState();
    const [selectedMonth, setSelectedMonth] = useState();
    const [selectedYear, setSelectedYear] = useState();
    const [selectedProvince, setSelectedProvince] = useState();
    const [checked, setChecked] = React.useState('male');
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Đăng ký</Text>
                </View>

                <View style={styles.boxRegister}>
                    <Text style={styles.boxRegisterTitle}>Đăng ký</Text>
                    <View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Địa chỉ Email<Text style={styles.registerItemWn}>*</Text></Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Tên<Text style={styles.registerItemWn}>*</Text></Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Số máy bàn</Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Số di động<Text style={styles.registerItemWn}>*</Text></Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Giới tính</Text>
                            <View style={styles.registerItemSex}>
                                <View style={styles.registerItemSexItem}>
                                    <Text style={styles.registerItemSexText}>Nam</Text>
                                    <View style={styles.registerItemSexRadio}>
                                        <RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
                                    </View>
                                </View>
                                <View style={styles.registerItemSexItem}>
                                    <Text style={styles.registerItemSexText}>Nữ</Text>
                                    <View style={styles.registerItemSexRadio}>
                                        <RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Ngày sinh</Text>
                            <View style={styles.registerBirthDay}>
                                <View style={styles.registerBirthDayItem}>
                                    <Picker
                                        style={styles.picker}
                                        itemStyle={styles.onePickerItem}
                                        selectedValue={selectedDay}
                                        onValueChange={(itemValue, itemIndex) =>
                                            setSelectedDay(itemValue)
                                        }
                                    >
                                        <Picker.Item label="Ngày" value="0" />
                                        <Picker.Item label="01" value="1" />
                                        <Picker.Item label="02" value="2" />
                                        <Picker.Item label="03" value="3" />
                                        <Picker.Item label="04" value="4" />
                                    </Picker>
                                </View>
                                <View style={styles.registerBirthDayItem}>
                                    <Picker
                                        style={styles.picker}
                                        itemStyle={styles.onePickerItem}
                                        selectedValue={selectedMonth}
                                        onValueChange={(itemValue, itemIndex) =>
                                            setSelectedMonth(itemValue)
                                        }
                                    >
                                        <Picker.Item label="Tháng" value="0" />
                                        <Picker.Item label="01" value="1" />
                                        <Picker.Item label="02" value="2" />
                                        <Picker.Item label="03" value="3" />
                                        <Picker.Item label="04" value="4" />
                                    </Picker>
                                </View>
                                <View style={styles.registerBirthDayItem}>
                                    <Picker
                                        style={styles.picker}
                                        itemStyle={styles.onePickerItem}
                                        selectedValue={selectedYear}
                                        onValueChange={(itemValue, itemIndex) =>
                                            setSelectedYear(itemValue)
                                        }
                                    >
                                        <Picker.Item label="Năm" value="0" />
                                        <Picker.Item label="2020" value="2020" />
                                        <Picker.Item label="2019" value="2019" />
                                        <Picker.Item label="2018" value="2018" />
                                        <Picker.Item label="2017" value="2017" />
                                    </Picker>
                                </View>
                            </View>
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Nhập lại mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
                            <TextInput style={styles.registerItemInput} />
                        </View>
                        <View style={styles.registerItem}>
                            <Text style={styles.registerItemText}>Tỉnh/TP</Text>
                            <Picker
                                style={styles.picker}
                                itemStyle={styles.onePickerItem}
                                selectedValue={selectedProvince}
                                onValueChange={(itemValue, itemIndex) =>
                                    setSelectedProvince(itemValue)
                                }
                            >
                                <Picker.Item label="Hà Nội" value="1" />
                                <Picker.Item label="Đà Nẵng" value="2" />
                                <Picker.Item label="Hải Phòng" value="3" />
                                <Picker.Item label="TP Hồ Chí Minh" value="4" />
                            </Picker>
                        </View>
                        <Pressable style={styles.boxRegisterSubmit}>
                            <Text style={styles.boxRegisterSubmitText}>Đăng ký</Text>
                        </Pressable>
                    </View>
                </View>

                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    boxRegister: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxRegisterTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    registerItem: {
        marginBottom: 10,
    },
    registerItemText: {
        fontWeight: 'bold',
        marginBottom: 5,
    },
    registerItemWn: {
        color: '#ff0000',
        fontWeight: 'normal'
    },
    registerItemInput: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
    },
    registerItemSex: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    registerItemSexItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
    },
    registerItemSexText: {
        marginRight: 5,
    },
    registerItemSexRadio: {
        width: 36,
        height: 36,
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 18,
    },
    boxRegisterSubmit: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
        borderRadius: 5,
    },
    boxRegisterSubmitText: {
        color: '#fff',
        fontWeight: 'bold'
    },
    registerBirthDay: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    registerBirthDayItem: {
        width: '32%'
    },
    picker: {
        height: 46,
        width: '100%',
    },
    onePickerItem: {
        height: 46,
        color: '#222',
        fontSize: 14,
        textAlign: 'center',
        width: '100%',
    },
})