import * as React from 'react'

export interface RegistrationPageProps {
    setIsLoggedIn: (set: boolean) => void
    setIsAskingForRegistration: (set: boolean) => void
    error: string | null
    setError: (a: string|null) => void
}

export default function RegistrationPage (props: RegistrationPageProps): JSX.Element {
    const userInputRef = React.useRef<HTMLInputElement>(null)
    const passwordInputRef = React.useRef<HTMLInputElement>(null)
    const repeatPasswordInputRef = React.useRef<HTMLInputElement>(null)
    const emailInputRef = React.useRef<HTMLInputElement>(null)
    const onUserAsksForLogin = (): void => {
        props.setIsAskingForRegistration(false)
    }
    function registerUser (): void {
        if (userInputRef.current === null) {
            return
        }
        if (passwordInputRef.current === null) {
            return
        }
        if (repeatPasswordInputRef.current === null) {
            return
        }
        if (emailInputRef.current === null) {
            return
        }
        fetch('/player/register', {
            method: 'POST',
            mode: 'same-origin',
            cache: 'no-cache',
            body: JSON.stringify({
                username: userInputRef.current.value,
                password: passwordInputRef.current.value,
                repeat_password: repeatPasswordInputRef.current.value,
                email: emailInputRef.current.value
            })
        }).then(async (response) => {
            const statusCode = response.status
            const data = await response.json()
            if (statusCode !== 200) {
                props.setError(data.error)
                return
            }
            props.setError(null)
        }).catch((error) => {
            console.log(error)
        })
    }
    return (
        <>
            <div className="login-container">
                <div className="login-contained">
                    <h1>Inicia sesión en L3TDE online</h1>
                    {(props.error !== null
                        ? (<p style={{ background: 'red' }}>{props.error}</p>)
                        : (<></>)
                    )}
                    <div className="login-form">
                        <input ref={userInputRef} type="text" placeholder="Nombre de usuario."/>
                        <input ref={passwordInputRef} type="password" placeholder="Password."/>
                        <input ref={repeatPasswordInputRef} type="password" placeholder="Repeat password."/>
                        <input ref={emailInputRef} type="text" placeholder="Email."/>
                        <div className="width-max-content align-self-end">
                            <button onClick={registerUser}>Registrate</button>
                        </div>
                    </div>
                    <p>¿Ya tienes cuenta? <a href="#" onClick={onUserAsksForLogin}>Inicia sesión</a>.</p>
                </div>
            </div>
        </>
    )
}