import React, { Component } from 'react';
import '../stylesheets/SignForms.css';
import {Link, NavLink, Redirect } from 'react-router-dom';
import Routing from '../authRoutes'
import image from "../image2.jpg";
const axios = require('axios');

class SignInForm extends Component {
    constructor() {
        super();

        this.state = {
            email: '',
            password: '',
            loggedIn:false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        let target = e.target;
        let value = target.type === 'checkbox' ? target.checked : target.value;
        let name = target.name;

        this.setState({
            [name]: value
        });

    }

    handleSubmit(e) {
        e.preventDefault();

        console.log('The form was submitted with the following data:');
        console.log(this.state);

        axios.post('http://localhost:9000/api/users/auth',{},{
            auth:{
                username:this.state.email, password:this.state.password
            }
        }).then(response=> {
            console.log(response);
            sessionStorage.setItem('token',response.data.token)
            this.setState({loggedIn:true})
            console.log(this.state)

        })
            .catch(error=>{
                alert("Wrong username or password!");
                console.log(error);
            });


    }

    render() {
        if(this.state.loggedIn)
        {
            console.log('Przekierowanie.')
           return <Redirect to='/menu'/>
        }
        return (

            <div className="SignInContainer">
                <div className="App__Aside">
                    {/*<img src={image} alt="logo" />*/}

                </div>
                <div className="App__Form">
                <div className="PageSwitcher">
                <NavLink to="/sign-in" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
                <NavLink exact to="/" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
                </div>

                <div className="FormTitle">
                <NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
                </div>




            <div className="FormCenter">
                <form onSubmit={this.handleSubmit} className="FormFields">
                    <div className="FormField">
                        <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
                        <input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
                    </div>

                    <div className="FormField">
                        <label className="FormField__Label" htmlFor="password">Password</label>
                        <input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
                    </div>

                    <div className="FormField">
                        <button className="FormField__Button mr-20">Sign In</button> <Link to="/" className="FormField__Link">Create an account</Link>
                    </div>
                </form>
            </div>
            </div>
            </div>
        );
    }
}

export default SignInForm;