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 {SIGN_UP_REQUEST} from "../reducers/user";
import styled from "styled-components";
import {useNavigation} from '@react-navigation/native';
import Profile from "../screens/Profile";


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

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


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
            }
        });
        if (me !== null) {
            navigation.navigate('Profile');
        }
    };

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

export default SignUpComponent;

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,
    }
});