import React from react import AuthHelper from helpers AuthHelper impo

import React from 'react';
import AuthHelper from '../helpers/AuthHelper';
import { AuthContext } from '../contexts/AuthContext';
import { Form, Col, Button } from 'react-bootstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';

const Auth = new AuthHelper();

const SignupSchema = Yup.object().shape({
    login: Yup.string()
        .min(6, 'Логин слишком короткий!')
        .max(50, 'Логин слишком длинный!')
        .required('Логин обязателен к заполнению!'),
    password: Yup.string()
        .min(6, 'Пароль слишком корткий!')
        .max(50, 'Пароль слишком длинный!')
        .required('Пароль обязателен к заполнению!'),
    confirmpassword: Yup.string()
        .oneOf([Yup.ref('password'), null], 'Пароли должны совпадать')
        .required('Пароль обязателен к заполнению!'),
});


class SignUp extends React.Component {
    constructor(props, context) {
        super(props);

        if(context.isAuth) {
            this.props.history.push('/');
        }

        this.onSignUp = this.onSignUp.bind(this);
    };

    onSignUp = async (data, actions) => {
        var form_data = new FormData();

        for (var key in data) {
            form_data.append(key, data[key]);
        }

        const response = await fetch('http://localhost:4040/api/account/signup', {
            method: 'POST',
            body: form_data,
        });

        const json = await response.json();

        if (json.accessToken) {
            Auth.setToken(json.accessToken);
            this.context.loginHandler(true);
            this.props.history.push('/');
            return true;
        } else {
            for(var k in json.errors) {
                actions.setFieldError("login", json.errors[k]);
            }
        }
    }

    render = () => {
        return (
            <React.Fragment>
                <Formik
                    initialValues={{
                        login: '',
                        password: '',
                        confirmpassword: '',
                    }}
                    validationSchema={SignupSchema}
                    onSubmit={(data, actions) => {
                        this.onSignUp(data, actions)
                        console.log(data);
                    }}
                >
                    {({
                        handleSubmit,
                        handleChange,
                        values,
                        touched,
                        isValid,
                        errors, 
                    }) => (
                        <Form noValidate onClick={handleSubmit}>
                            <Form.Group as={Col} md="12">
                                <Form.Label>Логин</Form.Label>
                                <Form.Control
                                    type="text"
                                    name="login"
                                    value={values.login}
                                    onChange={handleChange}
                                    isInvalid={!!errors.login}
                                    isValid={touched.login && !errors.login}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.login}
                                </Form.Control.Feedback>
                            </Form.Group>
                            <Form.Group as={Col} md="12">
                                <Form.Label>Пароль</Form.Label>
                                <Form.Control
                                    type="password"
                                    name="password"
                                    value={values.password}
                                    onChange={handleChange}
                                    isInvalid={!!errors.password}
                                    isValid={touched.password && !errors.password}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.password}
                                </Form.Control.Feedback>
                            </Form.Group>
                            <Form.Group as={Col} md="12">
                                <Form.Label>Повторите пароль</Form.Label>
                                <Form.Control
                                    type="password"
                                    name="confirmpassword"
                                    value={values.confirmpassword}
                                    onChange={handleChange}
                                    isInvalid={!!errors.confirmpassword}
                                    isValid={touched.confirmpassword && !errors.confirmpassword}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errors.confirmpassword}
                                </Form.Control.Feedback>
                            </Form.Group>
                            <Button disabled={!isValid} type="submit">
                                Зарегистрироваться
                            </Button>
                        </Form>
                    )}
                </Formik>
            </React.Fragment>
        );
    }
}

SignUp.contextType = AuthContext;

export default SignUp;