import React, {useState, useContext, useEffect, useCallback} from 'react';
import {View, Text, Image, TextInput, TouchableOpacity, StyleSheet} from 'react-native';
import {useDispatch, useSelector} from "react-redux";
import {useNavigation} from '@react-navigation/native';
import LoginComponent from "../components/LoginComponent";
import styled from "styled-components";


const Login = (props) => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(true);
    const [isLogin, setIsLogin] = useState(true);

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

    const changeIsLogin = () => {
        return setIsLogin(!isLogin);
    }

    useEffect(() => {
        setLoading(false);
    }, [me]);


    return (
        <View style={styles.changeStyle}>
            {me ?
                <View style={{flex: 2}}>
                    <Image
                        style={{width: 500, height: 600, flex: 1}}
                        source={require('../assets/nike.png')}
                    />
                    <TouchableOpacity
                        title={'SGGO'}
                        style={{flex: 1, fontSize: 100}}
                    >
                    </TouchableOpacity>
                </View>
                :
                <View style={styles.loginStyle}>
                    <Text style={styles.inputText}>로그인</Text>
                    <LoginComponent/>
                </View>
            }
        </View>
    )
};

export default Login;

const styles = StyleSheet.create({
    changeStyle: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: 'darkgrey',
    },
    loginStyle: {
        flex: 1,
        marginTop: 30,
    },
    inputText: {
        borderColor: 'darkgrey',
        fontWeight: 'bold',
        fontSize: 20,
        marginBottom: 10
    }

});