import React, { Component } from 'react';
import Icon from '@iconify/react';
import plusIcon from '@iconify/icons-fa-solid/plus';
import '../../css/Components/connection.css'
import axios from 'axios';
import { Redirect } from 'react-router';

class Connection extends Component {

    constructor(props){
        super(props)
        this.state={
            identifyer:'',
            password:'',
            redirect:false,
            errors:[]
        }
    }

    handleIdentifyerChange  = event => {
        this.setState({identifyer : event.target.value})
    }

    handlePasswordChange  = event => {
        this.setState({password : event.target.value})
    }

    handleSubmit = (event) => {
        event.preventDefault()
        console.log(this.state.password);

        let bodyFormData = new FormData();
        bodyFormData.set('identifyer',this.state.identifyer);
        bodyFormData.set('password',this.state.password)

        axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/login',bodyFormData)
            .then(res => {
                sessionStorage.setItem('token',res.data.api_token)
                this.setState({redirect:true})
                console.log(res.data.api_token);
            })
            .catch(error => {
                if(error.response.status === 401){
                    this.setState({errors:error.response.data.errors})
                } 
                console.log(error.response);
            })
    }

    render() {
        if (this.state.redirect){
            return (<Redirect to="/stock"/>)
        }
        return (
            <div id="transp">
            <div id="formBody">
                <div id="formHead">
                    <div id="formHeadTxt">Connexion</div>
                    <div id="crossClose" onClick={this.props.handleCloseAbove}>
                        <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '3vw'}} />
                    </div>
                </div>
                <div id="formMainContent">
                    <form method='POST'  onSubmit={this.handleSubmit}>
                        <div id="identifyerBlock">
                            <div id="identifyerBlockInput">
                                <label htmlFor="identifyerBox">Identifiant</label>
                                <input id="identifyerBox" onChange={this.handleIdentifyerChange} type="text"/>
                            </div>
                            <div id="errorIdentifyerBlock">
                                <p id="errorIdentifyer">{this.state.errors.identifyer}</p>
                            </div>
                        </div>
                        <div id="passwordBlock">
                            <div id="passwordBlockInput">
                                <label htmlFor="passwordBox">Mot de Passe</label>
                                <input id="passwordBox" onChange={this.handlePasswordChange} type="password"/>
                            </div>
                            <div id="errorPasswordBlock">
                                {this.state.errors === 'bad_pwd'? 
                                <p id="errorPassword">Mot de passe incorrect</p>
                                :
                                <p id="errorPassword">{this.state.errors.password}</p>}
                            </div>
                        </div>
                        <button id="button" type='submit'>Se connecter</button>
                    </form>
                </div>
            </div>
            </div>
        );
    }
}

export default Connection;