import React, {Component} from "react";
import { isMobile } from 'react-device-detect';
import './Style.css'
import ChoixDept from "./ChoixDept";
import ScoNavBar from "./ScoNavBar";
import {getLogin} from "./Request";

/** Page de Login */
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: "",
            pass: "",
            status: 0,
        };
        this.handleChangeLogin = this.handleChangeLogin.bind(this);
        this.handleChangePass = this.handleChangePass.bind(this);
        this.checkCredentials = this.checkCredentials.bind(this)
    }

    handleChangeLogin(e) {
        this.setState({ login: e.target.value });
    }

    handleChangePass(e) {
        this.setState({ pass: e.target.value });
    }

    /**
     * Verifie la validité des identifiants depuis l'API
     * @param e {event}
     */
    checkCredentials(e) {
        e.preventDefault();

        let login = this.state.login
        let pass = this.state.pass

        let BASE_URL = window.$api_url

        getLogin(BASE_URL, login, pass)
            .then(res => {
                this.setState({ status: res["status"] });
            })
            .catch(console.log)
    }


    render() {
        return (
            <div>
                {!isMobile &&
                    // TODO: Redirection mobile/desktop
                    <span/>
                }
                {(this.state.status !== 0 && this.state.status !== 200) &&
                <div className="wrapper">
                    <div id="errorMsg">
                        <h2 id="loginTitle">{"⚠️"} Login ou mot de passe incorrect</h2>
                    </div>
                </div>
                }
                {document.cookie === "" &&
                <div className="wrapper">
                    <div id="formContent">
                        <h2 id="loginTitle">Connexion a ScoDoc</h2>
                        <form>
                            <input type="text" id="login" placeholder="Identifiant" onChange={this.handleChangeLogin}/>
                            <input type="password" id="password" placeholder="Mot de passe"
                                   onChange={this.handleChangePass}/>
                            <button type="submit" value="Log In" onClick={this.checkCredentials}>Log in</button>
                        </form>
                    </div>
                </div>
                }
                <div>
                    {document.cookie !== "" &&
                    <ScoNavBar/>
                    }{document.cookie !== "" &&
                    <ChoixDept/>
                    }
                </div>
            </div>
        )
    }
}

export default Login