import React from "react";
import { Button, Card, Form, Alert, Container } 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 = {
            newUser: null,
            alertShow: false,
            alertKey: null,
            alertMsg: null
        };
        this.state.newUser = {
            email: null,
            firstName: null,
            lastName: null,
            phone: null,
            password: null
        };
        this.warnUser("Internal server error. Please try again later.", "danger");

        const sleep = ms => new Promise(res => setTimeout(res, ms));
        this.setState({ alertKey: "danger" }, () => {
            console.log(this.state.alertKey);
        }); 
        console.log("Hello");
    }

    async registerUser() {
        const sleep = ms => new Promise(res => setTimeout(res, ms));
        const res = await apiClient.post("/user", this.state.newUser);
        if (res.status === 200) {
            this.warnUser("You are successfully signed up!", "success");
            sleep(3000).then(() => {
                this.context.navigate("/dashboard", { replace: true });
            });
        } 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) {
        let newUser = this.state.user;
        newUser[event.target.controlId] = event.target.value;
        this.setState({user: newUser});
    }

    warnUser(msg, key) {
        this.setState({alertMsg: msg});
        this.setState({alertKey: key});
    }

    render() {
        return (
            <div className="page-root">
                <Container style={{ maxWidth: "35rem" }}>
                    <Alert variant={this.state.alertKey} style={{ width: "35rem" }}>
                        <Alert.Heading>{this.state.alertMsg}</Alert.Heading>
                    </Alert>
                    
                    <Card>
                        <Card.Body>
                            <Card.Title>Sign up with us</Card.Title> <br />
                            <Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle> <br />
                            <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">
                                    Register!
                                </Button>
                            </Form>
                        </Card.Body>
                    </Card>
                </Container>
            </div>
        );
    }
}