import React from 'react';
import "./Login.scss";
import "semantic-ui-css/semantic.min.css";
import {Form, Grid, Header, Image, Segment} from "semantic-ui-react";
import logo from '../../assets/images/icnodent_communication.png';
import background from '../../assets/images/background.jpg';
import {doLoginUser} from "../../api";
import {LS_TOKEN_KEY} from "../../constants/Constants";

export class Login extends React.Component {

    state = { email: '', password: '', loading: false};

    handleChange = (e, { name, value }) => this.setState({ [name]: value });

    doLoginHandle = async () => {
        this.setState({loading: true});
        const dataPost = {
            username: this.state.email,
            password: this.state.password
        };
        try {
            this.setState({loading: false});
            const responseLogin = await doLoginUser(dataPost);
            localStorage.setItem(LS_TOKEN_KEY, responseLogin.token);
        } catch (e) {
            this.setState({loading: false});
            console.log("catch");
        }
    };

    render() {
        return (
        <div id="login" style={{ backgroundImage: `url(${background})` }}>
            <Grid textAlign="center" verticalAlign="middle">
                <Grid.Column>
                    <Form size="large" onSubmit={this.doLoginHandle} loading={this.state.loading}>
                        <Segment>
                            <Header as="h2" textAlign="center">
                                <Image src={logo}/>
                            </Header>
                            <Form.Input
                                fluid
                                name="email"
                                icon="user"
                                iconPosition="left"
                                placeholder="Email address"
                                onChange={this.handleChange}
                            />
                            <Form.Input
                                fluid
                                name="password"
                                icon="lock"
                                iconPosition="left"
                                placeholder="Password"
                                type="password"
                                onChange={this.handleChange}
                            />
                            <Form.Button fluid size="large">
                                Login
                            </Form.Button>
                        </Segment>
                    </Form>
                </Grid.Column>
            </Grid>
        </div>
        );
    }
}