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

export default function Register() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);
  const [redirectTo, setRedirectTo] = useState<string | undefined>(undefined);

  const onValidSubmit = (formData) => {
    setLoading(true);
    
    const username = formData.username;
    const password = formData.password;
    const passwordReply = formData.passwordReply;

    if (password === passwordReply && password.length >= 8) {
      setLoading(!loading);
      signup(username, password)
        .then(() => {
          setRedirectTo("/login");
          setLoading(false);
        })
        .catch(() => {
          setError("Registrierung fehlgeschlagen!");
          setLoading(false);
        });
    } else {
      setError("Benutzername und Passwort mit min. 8 Zeichen vorhanden?");
    }
  };

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

  return (
    <Grid className="LoginGrid" verticalAlign="middle" centered={true}>
      <Grid.Column>
        <Link to="/login">
          <Image src="/images/diet.svg" size="small" centered />
        </Link>
        <Header textAlign="center" as="h1" content="Nutrinfo" />
        <Form size="large" onValidSubmit={onValidSubmit}>
          <Segment>
            <Header as="h3" content="Registrieren" />
            <Form.Field required>
              <Input
                name="username"
                required
                icon="user"
                iconPosition="left"
                placeholder="Username"
                errorLabel={<Label color="red" pointing />}
                validationErrors={{
                  isDefaultRequiredValue: "Benutzername eingeben",
                }}
              />
            </Form.Field>
            <Form.Field style={{ marginTop: "24px" }}>
              <Input
                name="password"
                required
                icon="lock"
                iconPosition="left"
                placeholder="Password"
                type="password"
                errorLabel={<Label color="red" pointing />}
                validations="minLength:8"
                validationErrors={{
                  isDefaultRequiredValue: "Passwort eingeben",
                  minLength: "mindestens 8 Zeichen nötig"
                }}
              />
            </Form.Field>
            <Form.Field>
              <Input
                name="passwordReply"
                icon="lock"
                required
                iconPosition="left"
                placeholder="Password wiederholen"
                type="password"
                validations="equalsField:password"
                errorLabel={<Label color="red" pointing />}
                validationErrors={{
                  isDefaultRequiredValue: "Passwort wiederholen",
                  equalsField: "Passwörter stimmen nicht überein"
                }}
              />
            </Form.Field>
            <Button
              color="brown"
              loading={loading}
              size="large"
              fluid={true}
              content="Registrieren"
            />
            {error && <Message color="red" content={error} />}
          </Segment>
        </Form>
      </Grid.Column>
    </Grid>
  );
}
