import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css'
import ChoixDept from "./ChoixDept";

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 });
    }

    checkCredentials(e) {
        let login = this.state.login
        let pass = this.state.pass

        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite', {
            method: 'GET',
            verify: false,
            credentials: 'include',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + btoa(login + ":" + pass)
            },
        })
            .then(res => {
                this.setState({ status: res["status"] });
                console.log("Cookie (get): " + res.headers.get('Set-Cookie'));
                console.log("Cookie (doc): " + document.cookie);
            })
            .catch(console.log)

        e.preventDefault()
    }

    render() {
        return (
            <div className="wrapper">
                {(this.state.status !== 0 && this.state.status !==200) &&
                <div id="errorMsg">
                    <h2 id="loginTitle">{ "⚠️" } Login ou mot de passe incorrect</h2>
                </div>
                }
                {this.state.status !== 200 &&
                <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>
                }{this.state.status === 200 &&
                    <ChoixDept/>
                }
            </div>
        )
    }
}

export default Login