/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import React from 'react';
import { Form, Container, Content, Text, Button } from 'native-base';
import { Dimensions, KeyboardAvoidingView } from 'react-native';
import Constants from 'expo-constants';
import styles from './style';
import Firebase, { withFirebase } from '../../../firebase';
import InputBlock from '../../../components/firebase/InputBlock';
import ActionButton from '../../../components/firebase/ActionButton';
import { showToast } from '../../../utils';
import AppIcon from '../../../components/firebase/AppIcon';
import { NavigationStackScreenProps } from 'react-navigation-stack';



interface Iprops extends NavigationStackScreenProps {
    firebase: Firebase;
}
interface Istate {
    email: string;
    password: string;
    name: string;
    rePassword: string;
    isLoading: boolean;
}

class SignUpPage extends React.Component<Iprops, Istate> {

    constructor(props: Iprops) {
        super(props)
        this.state = {
            email: '',
            password: '',
            name: '',
            rePassword: '',
            isLoading: false
        };
    }

    onChangeEmail = (email: string) => this.setState({ email });

    onChangeName = (name: string) => this.setState({ name });

    onChangePassword = (password: string) => this.setState({ password });

    onChangeRePassword = (rePassword: string) => this.setState({ rePassword });

    gotoSignIn = () => {
        const { navigate } = this.props.navigation;
        navigate('SignIn')
    }
    gotoHome = async () => {
        this.setState({ isLoading: true });
        const { email, password, name } = this.state;
        try {
            const loginData = await this.props.firebase.signUpWithEmailAndPassword(email, password);
            if (!loginData.code) {
                const { uid } = loginData.user
                const userData = { email, password, name, uid }
                await this.props.firebase.createNewUser(userData);
                const { navigate } = this.props.navigation;
                navigate('App')
            }
        } catch (e) {
            console.log(e, 'error in login');
            if (e.message) {
                showToast(e.message);
            }
            this.setState({ isLoading: false });
        }
    }

    render() {
        const {
            name,
            email,
            password,
            rePassword,
            isLoading
        } = this.state;
        const disableAction = (name.length > 0
            && email.length > 0
            && password.length > 0
            && rePassword.length > 0);
        return (
            <Container>
                <KeyboardAvoidingView style={styles.KeyboardAvoidingView}  >
                    <Content padder contentContainerStyle={styles.container}>
                        <AppIcon />
                        <Form>
                            <InputBlock
                                name='email'
                                onChangeText={this.onChangeEmail}
                                value={email}
                                disabled={isLoading}
                            />
                            <InputBlock
                                name='name'
                                onChangeText={this.onChangeName}
                                value={name}
                                disabled={isLoading}
                            />
                            <InputBlock
                                name='password'
                                onChangeText={this.onChangePassword}
                                value={password}
                                type='password'
                                disabled={isLoading}
                            />
                            <InputBlock
                                name='re-enter password'
                                onChangeText={this.onChangeRePassword}
                                value={rePassword}
                                type='password'
                                disabled={isLoading}
                            />
                            <ActionButton
                                onPress={this.gotoHome}
                                displayText='sign up'
                                disabled={!disableAction}
                                activityLoading={isLoading}
                            />
                        </Form>

                        <Button
                            full rounded warning
                            onPress={this.gotoSignIn}
                            style={styles.button}
                        >
                            <Text>Have an account? Sign In</Text>
                        </Button>

                    </Content>
                </KeyboardAvoidingView>
            </Container>
        );
    }
}

export default withFirebase(SignUpPage);
