import {withLayout} from "../layout_auth/Layout";
import {useState} from "react";
import axios from 'axios';
import Cookie from 'js-cookie';
import {useRouter} from "next/router";
import jwtDecode from "jwt-decode";
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Container, Row, Col, Form, Input, Button, Navbar, Nav,
    NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
    DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

function setUserIDLocalStrorage(token: string): void{
    const decoded_token = jwtDecode<{user:{ID:string} }>(token);
    localStorage.setItem('user_id', decoded_token.user.ID);
}

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_in', formData, {withCredentials: true})
            .then(function(response){
                let cook = response.headers['set-cookie']
                //Cookies.set('api_session', cook)
                router.push('/blog');
                //Perform action based on response
            })
            .catch(function(error){
                console.log(error);
                alert("Bad creads")
                //Perform action based on error
            });


        // ... submit to API or something
    };
    return (
        <>
            <form style={{gridArea: "form"}} onSubmit={handleSubmit}>
                <h1>Sign In</h1>
                <Input onChange={handleChange} name={"username"} placeholder={"Username"}/>
                <Input onChange={handleChange} name={"password"} placeholder={"Password"}/>
                <Button>Sign In</Button>
                <NavLink href={"/register"} style={{justifySelf: "center", alignSelf: "center"}}>Sign out</NavLink>
            </form>
        </>
    );
}

export default withLayout(Home);