import {  useState } from "react";
import { useRouter } from 'next/router'
import { Container, Card, Row, Col, Form, FormGroup, Label, Input, Button, Alert} from "reactstrap";
import styles from "./Register.module.scss";
import { registerUser } from "../../../lib/requests";

export default function Register({ data }) {
  const router = useRouter()
  const [isVisibleErrorMessage, setIsVisibleErrorMessage] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null)
  const [registerState, setRegisterState] = useState({
    username: "",
    email: "",
    password: "",
    first_name: "",
    last_name: ""
  });

  async function RegisterUser() {
    let response = await registerUser(registerState)
    if (response) {
      router.push("/login")
    }else{
      setErrorMessage("Registration Failed. Try again.")
      setIsVisibleErrorMessage(true)
    }
  }

  const onDismiss = () => setIsVisibleErrorMessage(false);

  function isValidData() {
    return (registerState.username && registerState.password && registerState.email && registerState.first_name && registerState.last_name)
  }

  return (
    <>
      <Container>
        <Card className={styles.card}>
        {errorMessage ? (
            <Alert color="danger" isOpen={isVisibleErrorMessage} toggle={onDismiss}>
              {errorMessage}
            </Alert>
          ) : (undefined)}
        <Form>
          <FormGroup>
            <Label for="username">
              Username
            </Label>
            <Input 
              id="username"
              name="username"
              placeholder="Username"
              type="text"
              onChange={(event) => setRegisterState({ ...registerState, username: event.target.value })}
            />
          </FormGroup>
          <FormGroup>
            <Label for="email">
              Email
            </Label>
            <Input 
              id="email"
              name="email"
              placeholder="Email"
              type="email"
              onChange={(event) => setRegisterState({ ...registerState, email: event.target.value })}
            />
          </FormGroup>
          <FormGroup>
            <Label for="password">
              Password
            </Label>
            <Input 
              id="password"
              name="password"
              placeholder="Password"
              type="password"
              onChange={(event) => setRegisterState({ ...registerState, password: event.target.value })}
             />
          </FormGroup>
          <FormGroup>
            <Label for="firstName">
              First Name
            </Label>
            <Input
              id="firstName"
              name="firstName"
              placeholder="First Name"
              type="text"
              onChange={(event) => setRegisterState({ ...registerState, first_name: event.target.value })}
             />
          </FormGroup>
          <FormGroup>
            <Label for="lastName">
              Last Name
            </Label>
            <Input
              id="lastName"
              name="lastName"
              placeholder="Last Name"
              type="text"
              onChange={(event) => setRegisterState({ ...registerState, last_name: event.target.value })}
              />
          </FormGroup>
          </Form>
          <Row>
            <Col>
              {isValidData() ? (
                <Button className={`float-end my-2 ${styles.registerButton}`} onClick={RegisterUser}>
                Register
                </Button>
              ) : (
                <Button className={`float-end my-2 ${styles.registerButton}`}  disabled>
                Register
                </Button>
              )}
            </Col>
          </Row>
        </Card>
      </Container>
    </>

  );
}

