import React from "react";
import { Button, Card, Form } from "react-bootstrap";
import { apiClient } from "../utils/httpClients";
import { guard } from "../utils/routing";

export default class Signup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null,
            alertShow: false,
            alertKey: null,
            alertMsg: null
        }
        this.state.user = {
            email: null,
            firstName: null,
            lastName: null,
            phone: null,
            password: null
        }
    }

    async registerUser() {
        const res = await apiClient.post("/user", this.state);
        if (res.status === 200) {
            this.warnUser("You are successfully signed up!", "success")
        } else if (res === 409) {
            this.warnUser("This user already exists. Try logging in instead.", "danger")
        } else if (res === 400) {
            this.warnUser("Missing required fields.", "danger")
        } else {
            this.warnUser("Internal server error. Please try again later.", "danger")
        }
    }

    setUserState(event) {
        newUser = this.state.user;
        newUser[event.target.controlId] = event.target.value
        this.setState({user: newUser})
    }

    warnUser(msg, key) {
        this.setState({alertMsg: msg})
        this.setState({show: true})
    }

    render() {
        return (
            <div className="page-root">
                <Alert show={this.state.alertShow} variant={this.state.alertKey}>
                    <Alert.Heading>{this.state.alertMsg}</Alert.Heading>
                </Alert>
                <Card>
                    <Card.Body>
                        <Card.Title>Login</Card.Title>
                        <Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle>
                        <Form onSubmit={this.registerUser}>
                            <Form.Group className="mb-3" controlId="firstName">
                                <Form.Label>First name</Form.Label>
                                <Form.Control type="text" placeholder="Ex. John" onChange={this.setUserState}/>
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="lastName">
                                <Form.Label>Last name</Form.Label>
                                <Form.Control type="text" placeholder="Ex. Smith" onChange={this.setUserState}/>
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="email">
                                <Form.Label>E-mail</Form.Label>
                                <Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={this.setUserState}/>
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="phone">
                                <Form.Label>Phone number</Form.Label>
                                <Form.Control type="text" placeholder="Ex. (123) 456-7890" onChange={this.setUserState}/>
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="password">
                                <Form.Label>Password</Form.Label>
                                <Form.Control type="password" placeholder="Enter password" onChange={this.setUserState}/>
                            </Form.Group>
                            <Button variant="primary" type="submit">
                                Login
                            </Button>
                        </Form>
                    </Card.Body>
                </Card>
            </div>
        );
    }
}