import React, { useState } from 'react';
import { Link, Redirect } from "react-router-dom"
import { Button, Grid, Header, Icon, Label } from "semantic-ui-react";
import { Segment, Message, Image } from "semantic-ui-react";
import { Form, Input } from "formsy-semantic-ui-react";
import { authenticate } from "../actions";
import { connect } from "react-redux";


function Login({ authenticate }) {

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<boolean | undefined>(undefined);
    const [redirectTo, setRedirectTo] = useState<string | undefined>(undefined);

    const onValidSubmit = formData => {
        setLoading(true);

        const username = formData.email;
        const password = formData.password;
        authenticate(username, password).then(() => {
            setRedirectTo('/');
        }).catch(() => {
            setLoading(false);
            setError(true)
        });
       
    };

    if (redirectTo) {
        return <Redirect to={redirectTo} />
    }

    return (
        <Grid className="LoginGrid" verticalAlign="middle" centered>
            <Grid.Column>
                <Image src='/images/burger.svg' size='small' centered />
                <Header textAlign='center' as="h1" content="Nutrinfo" />
                <Form size="large" onValidSubmit={onValidSubmit} loading={ loading } error={error}>
                    <Segment>
                        <Header as="h3" content="Einloggen" />
                        <Form.Field>
                            <Input
                                name="email"
                                icon="user"
                                iconPosition="left"
                                required
                                placeholder="Username"
                                validationErrors={{ isDefaultRequiredValue: 'Benutzername eingeben' }}
                                errorLabel={ <Label color="red" pointing /> }
                            />
                        </Form.Field>
                        <Form.Field>
                            <Input
                                name="password"
                                icon="lock"
                                iconPosition="left"
                                placeholder="Password"
                                type="password"
                                required
                                errorLabel={<Label color="red" pointing />}
                                validationErrors={{
                                  isDefaultRequiredValue: 'Passwort eingeben',
                                }}
                            />
                        </Form.Field>
                        <Button
                            color="brown"
                            size="large"
                            fluid={true}
                            content="Anmelden"
                        />
                        <Message color="red" error content="Login fehlgeschlagen!" />
                    </Segment>

                </Form>
                <Message className="LoginSignupMessage" warning>
                    <Icon name='help' />Noch nicht registriert?&nbsp;
                    <Link to="/signup">Hier</Link>&nbsp;kannst du dich registrieren.
                </Message>
            </Grid.Column>
        </Grid>
    );
}

const mapStateToProps = (state) => {
    return {};
  };

const mapDispatchToProps = {
    authenticate,
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
