import React, {useState, useContext, useEffect, useCallback} from 'react';
import {View, Text, Button, StyleSheet, TextInput, TouchableOpacity} from 'react-native';
import {useDispatch, useSelector} from "react-redux";
import {LOG_IN_REQUEST, LOG_OUT_REQUEST} from "../reducers/user";
import styled from "styled-components";
import {useNavigation} from '@react-navigation/native';
import Profile from "../screens/Profile";


const LoginButton = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  background-color: #e6e6fa;
  border: 1px;
  marginBottom: 10px;
  border-radius: 50px;

`;

const SignUpButton = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  background-color: #e6e6fa;
  border: 1px;
    border-radius: 50px;

`;


const LoginComponent = () => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(true);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');


    const {me} = useSelector(state => state.user);
    const {isLoggingIn} = useSelector(state => state.user);

    const onChangeEmail = (email) => {
        setEmail(email)
    };

    const onChangePassword = (password) => {
        setPassword(password);
    };

    const dispatch = useDispatch();
    const onSubmit = async () => {
        if (!email || !password) {
            return
        }
        await dispatch({
            type: LOG_IN_REQUEST,
            data: {
                email,
                password
            }
        });

    };
    const goSignUp = () => {
        navigation.navigate('SignUp');
    }

    useEffect(() => {
        if (me) {
            navigation.navigate('Profile');
        }
    }, [me]);

    useEffect(() => {
        setLoading(false);
        setEmail('');
        setPassword('');
    }, []);

    return (
        <View style={styles.containerStyle}>
            <TextInput
                style={styles.input}
                placeholder="Type here to Email!"
                onChangeText={onChangeEmail}
                defaultValue={email}
            />
            <TextInput
                style={styles.input}
                placeholder="Type here to password!"
                type="password"
                onChangeText={onChangePassword}
            />
            <LoginButton
                title={'Login'}
                onPress={onSubmit}>
                <Text style={{color: '#696969'}}>Login</Text>
            </LoginButton>
            <SignUpButton
                title={'Login'}
                onPress={goSignUp}>
                <Text style={{color: '#696969'}}>SignUp</Text>
            </SignUpButton>
        </View>
    )
};

const styles = StyleSheet.create({
    containerStyle: {
        // flex: 1,
        alignItems: 'center',
        // justifyContent: 'center',
        // backgroundColor: '#ecf0f1',
        // marginTop: 100,
    },
    input: {
        width: 200,
        height: 44,
        padding: 10,
        borderWidth: 1,
        borderColor: '#778899',
        marginBottom: 10,
    }
});

export default LoginComponent;