// Strict Mode
"use strict";

// Imports
import React, { useEffect, useState } from "react";
import authentication from "../../authentication/authentication.js";
import database from "../../database/database.js";
import styles from "../../styles/account.module.css";
import Header from "../../components/header/header.jsx";
import Title from "../../components/title/title.jsx";
import Footer from "../../components/footer/footer.jsx";

// Get Server Side Props
export async function getServerSideProps ( ctx ) {
    try {
        if (await database.activateUser(ctx.query.activate)) {
            await authentication.getUser(ctx.req, ctx.res);
            return {
                props: {
                    message: "Account Activated"
                }
            };
        } else {
            await authentication.getUser(ctx.req, ctx.res);
            return {
                props: {
                    message: "Error Activating Account"
                }
            };
        };
    } catch {
        await authentication.getUser(ctx.req, ctx.res);
        return {
            props: {
                message: "Error"
            }
        };
    };
};

// Account
export default function Home( props ) {
    const [ signInError, setSignInError ] = useState("");
    const [ signUpError, setSignUpError ] = useState("");
    useEffect(() => {
        const host = "http://localhost:3000/";
        try {
            const signInForm = document.querySelector(".signInForm");
            signInForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signInForm).entries();
                    const request = await fetch(host + "api/signIn", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    const result = await request.json();
                    if (result.response.success == true && result.response.activated == true) {
                        window.location = host + "account";
                    } else if (result.response.success == true && result.response.activated == false) {
                        setSignInError("Account Not Activated");
                    } else {
                        setSignInError("Bad Login");
                    };
                } catch {
                    setSignInError("Error");
                };
            }, []);
        } catch {};
        try {
            const signUpForm = document.querySelector(".signUpForm");
            signUpForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signUpForm).entries();
                    const response = await fetch(host + "api/createAccount", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    const result = await response.json();
                    if (result.response.error != undefined) {
                        setSignUpError(result.response.error);
                    } else {
                        setSignUpError("Check Your Email To Activate Your Account");
                    }
                } catch {
                    setSignUpError("Error");
                };
            });
        } catch {};
        try {
            const signOutForm = document.querySelector(".signOutForm");
            signOutForm.addEventListener("submit", async function ( event ) {
                try {
                    event.preventDefault();
                    const formData = new FormData(signOutForm).entries()
                    const response = await fetch(host + "api/signOut", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(Object.fromEntries(formData))
                    });
                    await response.json();
                    window.location = host + "account";
                } catch {
                    window.location = host + "account";
                };
            }, []);
        } catch {};
    });
    return (
        <div>
            <Header/>
            <Title title = "Account"/>
            <Title title = { props.message }/>
            {
                props.loggedIn ?
                    <div className = { styles.account }>
                        <form className = "signOutForm">
                            <button type = "submit">Sign Out</button>
                        </form> 
                    </div>
                : (
                    <div className = { styles.account }>
                        <div>
                            <h2>Sign In</h2>
                            <form className = "signInForm">
                                <input type = "email" placeholder = "Email" name = "Email"/>
                                <input type = "password" placeholder = "Password" name = "Password"/>
                                <button type = "submit">Submit</button>
                            </form>
                            {
                                signInError ?
                                    <h3>{ signInError }</h3>
                                : (
                                    <h3>&nbsp;</h3>
                                )
                            }
                        </div>
                        <div>
                            <h2>Sign Up</h2>
                            <form className = "signUpForm">
                                <input type = "text" placeholder = "Username" name = "Username"/>
                                <input type = "email" placeholder = "Email" name = "Email"/>
                                <input type = "password" placeholder = "Password" name = "Password"/>
                                <input type = "password" placeholder = "Confirm Password" name = "Confirm Password"/>
                                <button type = "submit">Submit</button>
                            </form>
                            {
                                signUpError ?
                                    <h3>{ signUpError }</h3>
                                : (
                                    <h3>&nbsp;</h3>
                                )
                            }
                        </div>
                    </div>
                )
            }
            <Footer/>
        </div>
    );
};