import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { TextInput } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';

export default function Login() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.boxLogin}>
                    <View style={styles.boxLoginTitle}>
                        <Text style={styles.boxLoginTitleText}>Chào mừng đến với Nagakawa!</Text>
                        <Text style={styles.boxLoginTitleText}>Đăng nhập ngay!</Text>
                    </View>
                    <View style={styles.boxLoginToRegis}>
                        <Text>Khách hàng mới?</Text>
                        <TouchableOpacity>
                            <Text style={styles.green}>Đăng ký</Text>
                        </TouchableOpacity>
                        <Text>tại đây</Text>
                    </View>
                    <View style={styles.loginCartSocialForm}>
                        <View style={styles.loginCartSocialFormItem}>
                            <Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
                            <TextInput style={styles.loginCartSocialFormItemInput} />
                        </View>
                        <View style={styles.loginCartSocialFormItem}>
                            <Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
                            <TextInput style={styles.loginCartSocialFormItemInput} />
                        </View>
                        <View style={styles.boxLoginForgetPass}>
                            <TouchableOpacity>
                                <Text style={styles.boxLoginForgetPassText}>Quên mật khẩu?</Text>
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity style={styles.boxLoginSubmit}>
                            <Text style={styles.boxLoginSubmitText}>Đăng nhập</Text>
                        </TouchableOpacity>
                        <View style={styles.boxLoginOther}>
                            <Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
                        </View>
                        <View style={styles.boxLoginSocial}>
                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
                                <FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
                                <FontAwesome style={styles.boxLoginSocialIcon} name="google" />
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
                                <Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    boxLogin: {
        width: winWidth,
        padding: 10,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    boxLoginTitle: {
        width:  '100%',
        backgroundColor: 'rgba(0,0,0,0)',
        marginBottom: 20,
    },
    boxLoginTitleText: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    boxLoginToRegis: {
        width:  '100%',
        backgroundColor: 'rgba(0,0,0,0)',
        marginBottom: 10,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    green: {
        color: '#008445',
    },
    loginCartSocialForm: {
        marginBottom: 10,
        padding: 10,
    },
    loginCartSocialFormItem: {
        width: '100%',
        marginBottom: 10,
    },
    loginCartSocialFormItemText: {
        marginBottom: 5,
        fontWeight: 'bold'
    },
    loginCartSocialFormItemInput: {
        width: '100%',
        height: 40,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 5,
    },
    loginCartSocialFormNote: {
        marginBottom: 10,
        flexDirection: 'row',
    },
    boxLoginForgetPass: {
        width: '100%',
        flexDirection: 'row',
        marginBottom: 15,
        justifyContent: 'flex-end',
    },
    boxLoginForgetPassText: {
        color: '#008445',
    },
    boxLoginSubmit: {
        width: '100%',
        height: 40,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        overflow: 'hidden',
        backgroundColor: '#d9282f',
        marginBottom: 20,
    },
    boxLoginSubmitText: {
        fontWeight: 'bold',
        color: '#fff'
    },
    boxLoginOther: {
        marginBottom: 20,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    boxLoginOtherText: {},
    boxLoginSocial: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    boxLoginSocialItem: {
        width: 34,
        height: 34,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        marginHorizontal: 5,
        backgroundColor: '#3b5998',
    },
    boxLoginSocialFace: {},
    boxLoginSocialGoogle: {
        backgroundColor: '#df4a32',
    },
    boxLoginSocialZalo: {
        backgroundColor: '#0f8edd',
    },
    boxLoginSocialIcon: {
        fontSize: 16,
        color: '#fff',
    },
    boxLoginSocialImg: {
        width: 16,
        height: 16,
    },
});