import React from "react";
import { Alert, Button, Card, Container, Form } from "react-bootstrap";
import globals from "../globals";
import { apiClient } from "../utils/httpClients";

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: "",
            errorDisplayed: false,
        };

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

    static contextType = globals;

    async componentDidMount() {
    }

    componentDidUpdate() {
        if (this.context.user) {
            this.context.navigate("/dashboard");
        }
    }

    async attemptLogin(e) {
        e.preventDefault();
        const loginResponse = await apiClient.post("/user/login", {
            email: this.state.email,
            password: this.state.password,
        });
        if (loginResponse.status === 200) {
            this.context.update({ user: loginResponse.data });
        } else if (loginResponse.status === 401) {
            this.setState({ errorDisplayed: true });
        }
    }

    render() {
        let errorMsg = (
            <div></div>
        );
        if (this.state.errorDisplayed) {
            errorMsg = (
                < Alert variant="danger" onClose={() => this.setState({ errorDisplayed: false })} dismissible >
                    <Alert.Heading>Incorrect credentials</Alert.Heading>
                    <p>Double check your provided e-mail and password!</p>
                </Alert >
            );
        }

        return (
            <div className="d-flex justify-content-center align-items-center
            page-root">
                {errorMsg}
                <Container style={{ maxWidth: "35rem" }}>
                    <Card>
                        <Card.Body>
                            <Card.Title>Login</Card.Title>
                            <Card.Subtitle>Welcome back!</Card.Subtitle>
                            <Form onSubmit={this.attemptLogin}>
                                <Form.Group className="mb-3" controlId="loginEmail">
                                    <Form.Label>E-mail</Form.Label>
                                    <Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={(e) => {
                                        this.setState({ email: e.target.value });
                                    }} />
                                </Form.Group>
                                <Form.Group className="mb-3" controlId="loginPassword">
                                    <Form.Label>Password</Form.Label>
                                    <Form.Control type="password" placeholder="Enter password" onChange={(e) => {
                                        this.setState({ password: e.target.value });
                                    }} />
                                </Form.Group>
                                <Button variant="primary" type="submit">
                                    Submit
                                </Button>
                            </Form>
                        </Card.Body>
                    </Card>
                </Container>
            </div>
        );
    }
}