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

const MyProfileComponent = () => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(true);

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

    const dispatch = useDispatch();
    const onLogout = async () => {
        await dispatch({
            type: LOG_OUT_REQUEST
        });
        console.log('onLogout');
    };
    return (
        <View>
            <View style={styles.containerStyle}>
                <Text style={styles.TextStyle}>마이페이지</Text>
                <Text style={styles.TextStyle}>{me.email}</Text>
                <Text style={styles.TextStyle}>{me.nickName}</Text>
                <TouchableOpacity onPress={onLogout}>
                    <MaterialCommunityIcons color={'green'} name={'logout'} size={30}/>
                </TouchableOpacity>
            </View>
        </View>
    )
};

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

export default MyProfileComponent;