import React, { useState } from "react";
import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
import { Link, useLocation } from "wouter";
import MyNavbar from "../components/MyNavbar";
import { makeRequest } from "../utils.ts";

const RegisterPage = () => {
  const [role, setRole] = useState("student");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [password2, setPassword2] = useState("");

  const [error, setError] = useState(null);
  const [location, setLocation] = useLocation();

  const sendRegisterRequest = (e) => {
    e?.preventDefault();
    makeRequest({
      url: "http://localhost:5000/register",
      method: "POST",
      body: {
        role,
        email,
        username,
        password,
        password2,
      },
    })
      .then((resp) => resp.json())
      .then((data) => {
        if (data.error) {
          setError(data);
          return;
        }
        setLocation("/login");
      });
  };

  return (
    <React.Fragment>
      <MyNavbar />
      <Container className="p-5">
        {error && (
          <Container>
            <Alert variant="danger" className="mx-auto w-50 text-center">
              {error.message}
            </Alert>
          </Container>
        )}
        <h2>Register</h2>
        <br />
        <Form onSubmit={sendRegisterRequest}>
          <Form.Group as={Row} className="mb-3" controlId="role">
            <Form.Label column sm={2} className="me-2">
              Role
            </Form.Label>
            <Col sm={9}>
              <Form.Select
                onChange={(e) => {
                  setRole(e.target.value);
                }}
              >
                <option value="student">Student</option>
                <option value="teacher">Teacher</option>
              </Form.Select>
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="username">
            <Form.Label column sm={2} className="me-2">
              Username
            </Form.Label>
            <Col sm={9}>
              <Form.Control
                type="username"
                placeholder="username"
                onChange={(e) => {
                  setUsername(e.target.value);
                }}
              />
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="email">
            <Form.Label column sm={2} className="me-2">
              Email
            </Form.Label>
            <Col sm={9}>
              <Form.Control
                type="email"
                placeholder="email"
                onChange={(e) => {
                  setEmail(e.target.value);
                }}
              />
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="password">
            <Form.Label column sm={2} className="me-2">
              Password
            </Form.Label>
            <Col sm={9}>
              <Form.Control
                type="password"
                placeholder="password"
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
              />
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="password2">
            <Form.Label column sm={2} className="me-2">
              Confirm Password
            </Form.Label>
            <Col sm={9}>
              <Form.Control
                type="password"
                placeholder="password"
                onChange={(e) => {
                  setPassword2(e.target.value);
                }}
              />
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="submit">
            <Col sm={2}></Col>
            <Col sm={2}>
              <Button
                type="submit"
                disabled={!password || password !== password2}
              >
                Submit
              </Button>
            </Col>
          </Form.Group>
          <Form.Group as={Row}>
            <p>
              Already have an account? <Link href="/login">Login here</Link>
            </p>
          </Form.Group>
        </Form>
      </Container>
    </React.Fragment>
  );
};

export default RegisterPage;