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


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

const SignUpComponent = () => {
    const navigation = useNavigation();
    const [email, setEmail] = useState('');
    const [nickName, setNickName] = useState('');
    const [password, setPassword] = useState('');


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

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

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

    const onChangeNickName = (nickName) => {
        setNickName(nickName)
    };

    const dispatch = useDispatch();
    const onSubmit = async () => {
        await dispatch({
            type: SIGN_UP_REQUEST,
            data: {
                email,
                nickName,
                password
            }
        });
    };

    return (
        <>
            <View>
                <View>
                    <TextInput
                        style={{height: 40, marginLeft: 10}}
                        placeholder="Type here to Email!"
                        onChangeText={onChangeEmail}
                    />
                </View>
                <View>
                    <TextInput
                        style={{height: 40, marginLeft: 10}}
                        placeholder="Type here to nickname!"
                        onChangeText={onChangeNickName}
                    />
                </View>
                <View>
                    <TextInput
                        style={{height: 40, marginLeft: 10}}
                        placeholder="Type here to password!"
                        type="password"
                        onChangeText={onChangePassword}
                    />
                </View>
                <SignUpButton title={'회원가입'} onPress={onSubmit}>
                    <Text>회원가입</Text>
                </SignUpButton>
            </View>
        </>
    )
};

export default SignUpComponent;