import React from 'react';
import {
    Image,
    ScrollView,
    StatusBar,
    StyleSheet,
    View,
    Text,
    TextInput,
    TouchableOpacity
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export function Login() {
    const [isVisible, setIsVisible] = React.useState(false);
    const [isChecked, setIsChecked] = React.useState(false);

    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle={'dark-content'} />

            <ScrollView
                contentContainerStyle={styles.scrollContainer}
                bounces={false}
                showsVerticalScrollIndicator={false}
            >
                <View style={styles.logoContainer}>
                    <View style={styles.logoWrapper}>
                        <Image
                            source={require('./assets/img/logo.png')}
                            style={styles.logo}
                        />
                    </View>
                </View>

                <View style={styles.formContainer}>
                    <Text style={styles.title}>Login</Text>
                    <Text style={styles.subtitle}>
                        Welcome back. Enter your credentials to{'\n'}access your account
                    </Text>

                    <Text style={styles.label}>Email Address*</Text>
                    <View style={styles.inputContainer}>
                        <TextInput
                            placeholder="Enter Email"
                            style={styles.input}
                            placeholderTextColor="#A0A0A0"
                        />
                    </View>

                    <Text style={styles.label}>Password*</Text>
                    <View style={styles.passwordContainer}>
                        <TextInput
                            placeholder="Password"
                            style={styles.input}
                            placeholderTextColor="#A0A0A0"
                            secureTextEntry={!isVisible}
                        />
                        <TouchableOpacity
                            onPress={() => setIsVisible(!isVisible)}
                            style={styles.eyeButton}
                        >
                            <Image
                                source={require('./assets/img/View_light.png')}
                                style={[
                                    styles.eyeIcon,
                                    { tintColor: isVisible ? '#FDA913' : '#707070' },
                                ]}
                            />
                        </TouchableOpacity>
                    </View>

                    <View style={styles.rowBetween}>
                        <View style={styles.checkboxRow}>
                            <TouchableOpacity
                                onPress={() => setIsChecked(!isChecked)}
                                style={styles.checkboxBorder}
                            >
                                <View
                                    style={[
                                        styles.checkboxFill,
                                        { backgroundColor: isChecked ? '#02364E' : 'transparent' },
                                    ]}
                                >
                                    <Image
                                        source={require('./assets/img/check.png')}
                                        style={styles.checkIcon}
                                    />
                                </View>
                            </TouchableOpacity>
                            <Text style={styles.checkLabel}>Keep me signed in</Text>
                        </View>

                        <Text style={styles.forgotText}>Forget Password?</Text>
                    </View>

                    <TouchableOpacity style={styles.loginButton}>
                        <Text style={styles.loginText}>Login</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#f5f5f5",
        justifyContent: "center",
    },

    scrollContainer: {
        flexGrow: 1,
    },

    logoContainer: {
        paddingHorizontal: 15,
        paddingTop: 20,
        paddingBottom: 20,
    },
    logoWrapper: {
        width: "100%",
        height: 50,
    },
    logo: {
        width: "50%",
        height: "100%",
        resizeMode: "contain",
    },

    formContainer: {
        flex: 1,
        paddingHorizontal: 15,
    },

    title: {
        color: "#090A0A",
        fontFamily: "Gilroy-SemiBold",
        fontSize: 32,
        fontWeight: "400",
        marginBottom: 10,
    },

    subtitle: {
        color: "#090A0A",
        fontFamily: "Gilroy-Regular",
        fontSize: 16,
        fontWeight: "400",
        marginBottom: 30,
        lineHeight: 20,
    },

    label: {
        color: "#111111",
        fontFamily: "Gilroy-Regular",
        fontSize: 14,
        marginBottom: 7,
    },

    inputContainer: {
        marginBottom: 20,
        height: 50,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: "#CFCFCF",
    },

    input: {
        flex: 1,
        paddingHorizontal: 15,
        fontSize: 14,
        fontFamily: "Gilroy-Regular",
        color: "#111111",
    },

    passwordContainer: {
        flexDirection: "row",
        marginBottom: 20,
        height: 50,
        borderRadius: 16,
        borderWidth: 1,
        borderColor: "#CFCFCF",
    },

    eyeButton: {
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: 15,
    },

    eyeIcon: {
        width: 20,
        height: 20,
        resizeMode: "contain",
    },

    rowBetween: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: 40,
    },

    checkboxRow: {
        flexDirection: "row",
        alignItems: "center",
    },

    checkboxBorder: {
        width: 15,
        height: 15,
        borderRadius: 2,
        borderWidth: 1,
        borderColor: "#CFCFCF",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 8,
    },

    checkboxFill: {
        width: 15,
        height: 15,
        borderRadius: 2,
        alignItems: "center",
        justifyContent: "center",
    },

    checkIcon: {
        width: "70%",
        height: "70%",
        resizeMode: "contain",
        tintColor: "#ffffff",
    },

    checkLabel: {
        fontFamily: "Gilroy-Regular",
        fontSize: 14,
        color: "#191D23",
    },

    forgotText: {
        textDecorationLine: "underline",
        color: "#111111",
        fontFamily: "Gilroy-Regular",
    },

    loginButton: {
        height: 50,
        borderRadius: 16,
        backgroundColor: "#FDA913",
        justifyContent: "center",
        alignItems: "center",
        marginBottom: 20,
    },

    loginText: {
        color: "#FFFFFF",
        fontFamily: "Gilroy-SemiBold",
        fontSize: 18,
    },
});