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 ContactUs() {
    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}>Liên Hệ</Text>
                </View>

                <View style={styles.boxContactUs}>
                    <Text style={styles.boxContactUsText}>Mọi thắc mắc hoặc góp ý, quý khách vui lòng liên hệ trực tiếp với bộ phận chăm sóc khách hàng của chúng tôi bằng cách điền đầy đủ thông tin vào form bên dưới</Text>
                    <View>
                        <View style={styles.formItem}>
                            <Text style={styles.formItemText}>Tên đầy đủ<Text style={styles.formItemTextNote}>*</Text></Text>
                            <TextInput style={styles.formItemInput} />
                        </View>
                        <View style={styles.formItem}>
                            <Text style={styles.formItemText}>Email<Text style={styles.formItemTextNote}>*</Text></Text>
                            <TextInput style={styles.formItemInput} />
                        </View>
                        <View style={styles.formItem}>
                            <Text style={styles.formItemText}>Số điện thoại</Text>
                            <TextInput style={styles.formItemInput} />
                        </View>
                        <View style={styles.formItem}>
                            <Text style={styles.formItemText}>Thông tin liên hệ<Text style={styles.formItemTextNote}>*</Text></Text>
                            <TextInput style={styles.formItemArea} />
                        </View>
                        <Pressable style={styles.formSubmit}>
                            <Text style={styles.formSubmitText}>Gửi liên hệ</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
    },
    boxContactUs: {
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxContactUsText: {
        marginBottom: 20,
    },
    formItem: {
        marginBottom: 20,
    },
    formItemText: {
        marginBottom: 5,
    },
    formItemTextNote: {
        color: '#ff0000'
    },
    formItemInput: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
    },
    formItemArea: {
        width: '100%',
        height: 110,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        padding: 10,
    },
    formSubmit: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#243a76'
    },
    formSubmitText: {
        fontWeight: 'bold',
        color: '#fff'
    },
})