import React, { useState } from "react";
import { Button, Input } from "antd";
import { useCreateUser } from "../../hooks/useCreateUser";
import { useNavigate } from "react-router";

export const SignUp = () => {
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [repeatPassword, setRepeatPassword] = useState("");
    const navigate = useNavigate();

    const { createUser, isLoading, error } = useCreateUser();

    return (
        <div className="Box Small">
            <div className="Section">
                <div className="Section">
                    <Input
                        type="email"
                        placeholder="Email"
                        name="Email"
                        onChange={(ev) => setEmail(ev.target.value)}
                    />
                    <Input
                        placeholder="Username"
                        name="User"
                        onChange={(ev) => setUsername(ev.target.value)}
                    />
                    <Input.Password
                        placeholder="Password"
                        name="Password"
                        onChange={(ev) => setPassword(ev.target.value)}
                    />
                    <Input.Password
                        placeholder="Repeat password"
                        name="PasswordRep"
                        onChange={(ev) => setRepeatPassword(ev.target.value)}
                    />
                    <Button
                        style={{ width: "100%" }}
                        onClick={async () =>
                            await createUser({ email, password, username })
                        }
                        name="Signup"
                        loading={isLoading}
                        disabled={
                            email === "" ||
                            username === "" ||
                            password === "" ||
                            password !== repeatPassword
                        }
                    >
                        Sign up
                    </Button>
                    <Button
                        style={{ width: "100%" }}
                        onClick={() =>
                            navigate("/login")
                        }
                    >
                        Login
                    </Button>
                    {error ? (
                        <div className="Disconnected">{error}</div>
                    ) : (
                        <></>
                    )}
                </div>
            </div>
        </div>
    );
};