import {withLayout} from "../layout_auth/Layout";
import {useState} from "react";
import axios from 'axios';
    import 'bootstrap/dist/css/bootstrap.min.css';
import {useRouter} from "next/router";
import {
    Container, Row, Col, Form, Input, Button, Navbar, NavLink
} from 'reactstrap';

function Home() {
    const router = useRouter();
    const initialFormData = Object.freeze({
        username: "",
        password: ""
    });
    const [formData, updateFormData] = useState(initialFormData);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        updateFormData({
            ...formData,

            // Trimming any whitespace
            [e.target.name]: e.target.value.trim()
        });
    };

    const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
        e.preventDefault();

        axios.post('http://10.50.20.5:13377/api/auth/sign_up', formData)
            .then(function(response){

                router.push('/auth');
                //Perform action based on response
            })
            .catch(function(error){
                console.log(error);
                //Perform action based on error
            });


        // ... submit to API or something
    };


    return (
        <>
            <form style={{gridArea: "form"}} onSubmit={handleSubmit}>
                <h1>Sign Out</h1>
                <Input onChange={handleChange} name={"username"} placeholder={"Username"}/>
                <Input onChange={handleChange} type={"password"} name={"password"}  placeholder={"Password"}/>
                <Input onChange={handleChange} type={"password"} name={"password_repeat"} placeholder={"Password (repeat)"}/>
                <Button>Sign Out</Button>
                <NavLink href={"/auth"} style={{justifySelf: "center", alignSelf: "center"}}>Sign In</NavLink>
            </form>
        </>
    );
}

export default withLayout(Home);