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 ForgetPassword() {
    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}>Quên mật khẩu</Text>
                </View>

                <View style={styles.boxForgetPassword}>
                    <Text style={styles.boxForgetPasswordTitle}>Bạn quên mật khẩu vào tài khoản?</Text>
                    <Text style={styles.boxForgetPasswordNote}>Vui lòng nhập địa chỉ email đã đăng ký với chúng tôi để tạo mật khẩu mới. Chúng tôi sẽ gửi 1 email vào địa chỉ email cung cấp và yêu cầu xác minh trước khi có thể tạo mật khẩu mới</Text>
                    <View>
                        <View style={styles.boxForgetPasswordItem}>
                            <Text style={styles.boxForgetPasswordText}>Nhập địa chỉ email đăng ký</Text>
                            <TextInput style={styles.boxForgetPasswordInput} />
                        </View>
                        <View style={styles.boxForgetPasswordItem}>
                            <Text style={styles.boxForgetPasswordText}>Mã bảo mật</Text>
                            <TextInput style={styles.boxForgetPasswordInput} />
                        </View>
                        <Pressable style={styles.boxForgetPasswordSubmit}>
                            <Text style={styles.boxForgetPasswordSubmitText}>Lấy lại mật khẩu</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
    },
    boxForgetPassword: {
        paddingHorizontal: 10,
        width: winWidth,
        marginBottom: 20,
    },
    boxForgetPasswordTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    boxForgetPasswordNote: {
        marginBottom: 20,
    },
    boxForgetPasswordItem: {
        marginBottom: 20,
    },
    boxForgetPasswordText: {
        marginBottom: 8,
    },
    boxForgetPasswordInput: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        paddingHorizontal: 10,
    },
    boxForgetPasswordSubmit: {
        width: '100%',
        height: 40,
        borderRadius: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#243a76'
    },
    boxForgetPasswordSubmitText: {
        fontWeight: 'bold',
        color: '#fff'
    },
})