import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import axios from "axios";
import "./register.css"

export default function Register() {
    // initial state
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [register, setRegister] = useState(false);
    const [emailExists, setEmailExists] = useState(false);

    const handleSubmit = (e) => {
        console.log("inside handleSubmit")
        // prevent the form from refreshing the whole page
        e.preventDefault();

        // set configurations
        const configuration = {
            method: "post",
            url: "http://localhost:3001/register",
            data: {
                email,
                password,
            },
        };

        // make the API call
        axios(configuration)
            .then((result) => {
                console.log("result is:", result)
                setRegister(true);
            })
            .catch((error) => {
                setEmailExists(true);
                setRegister(false);
                console.log("error is:", error)
                error = new Error();
            });
    };

    return (
        <>
        <div class="split left"></div>
        <div class="split right">
            <div class="centered">
                <h2 class="register-title">Create an account</h2>
                <div class="register-form">
                    <Form onSubmit={(e) => handleSubmit(e)}>
                        {/* email */}
                        <Form.Group controlId="formBasicEmail">
                        <Form.Label></Form.Label>
                        <Form.Control
                            type="email"
                            name="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="Email"
                        />
                        </Form.Group>

                        {/* password */}
                        <Form.Group controlId="formBasicPassword">
                        <Form.Label></Form.Label>
                        <Form.Control
                            type="password"
                            name="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="Password"
                        />
                        </Form.Group>
                        <br/>
                        {/* submit button */}
                        <Button
                        variant="primary"
                        type="submit"
                        onClick={(e) => handleSubmit(e)}
                        >
                        Register
                        </Button>

                        {/* display success message */}
                        {register ? (
                        <p className="text-success">You are registered successfully!</p>
                        ) : (
                        <p className="text-danger"></p>
                        )}

                        {emailExists && !register ? (
                        <p className="text-danger">An account with this email already exists</p>
                        ) : (
                        <p className="text-danger"></p>
                        )}
                    </Form>
                </div>
                <div class="login">
                    <a class="login" href="/">Log in</a>
                </div>
            </div>
        </div>
        </>
        );
}