import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import API from "../api/api";

const Register = () => {
    const navigate = useNavigate()

    const [form, setForm] = useState({
        names: "",
        email: "",
        password: "",
        role: ""
    })

    const handleChange = (e) => {
        setForm({
            ...form, [e.target.name]: e.target.value
        })
    }


    const handleSubmit = async (e) => {
        e.preventDefault()
        try {
            const res = await API.post("/register", form)
        } catch (error) {
            return alert(error)
        }

        navigate("/dashboard")
    }
    return (
        <>
            <div className="w-full h-screen flex items-center justify-center">
                <div className="w-1/4 h-8/12 border-2 border-cyan-500 rounded-2xl">
                    <div className="w-full flex items-center justify-center">
                        <p className="font-semibold text-2xl text-(--text-main)">Register</p>
                    </div>
                    <div className="w-full h-5/7 flex flex-col items-center justify-evenly">
                        <input
                            type="text"
                            onChange={handleChange}
                            name="names"
                            placeholder="Username"
                            className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/8 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3" />
                        <input
                            type="email"
                            onChange={handleChange}
                            name="email"
                            placeholder="Email"
                            className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/8 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3" />
                        <input
                            type="password"
                            onChange={handleChange}
                            name="password"
                            placeholder="Password"
                            className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/8 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3" />
                        <input
                            type="text"
                            onChange={handleChange}
                            name="role"
                            placeholder="Role"
                            className="border border-(--bg-maj) text-(--text-maj) w-10/11 h-1/8 rounded-xl placeholder:text-(--text-maj)/40 text-sm pl-4 pr-3" />
                    </div>
                    <div className="w-full h-1/8 flex justify-center">
                        <button onClick={handleSubmit} className="w-10/11 h-10 rounded bg-(--bg-maj)">Submit</button>
                    </div>
                    <div className="w-full flex items-center justify-center"><p className="text-(--text-main) text-sm font-light">Already have an account? <Link to="/login" className="text-(--text-maj) hover:underline">Login</Link></p></div>
                </div>
            </div>
        </>
    )
}

export default Register