import * as React from 'react'

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

export default function LoginPage (props: LoginPageProps): JSX.Element {
    const userInputRef = React.useRef<HTMLInputElement>(null)
    const passwordInputRef = React.useRef<HTMLInputElement>(null)
    const onUserAsksForRegistration = (): void => {
        props.setIsAskingForRegistration(true)
    }
    const login = (): void => {
        if (userInputRef.current === null) {
            return
        }
        if (passwordInputRef.current == null) {
            return
        }
        fetch('/player/login', {
            method: 'POST',
            mode: 'same-origin',
            cache: 'no-cache',
            body: JSON.stringify({
                username: userInputRef.current.value,
                password: passwordInputRef.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)
            props.setIsLoggedIn(true)
        }).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"/>
                        <div className="width-max-content align-self-end">
                            <button onClick={login}>Login</button>
                        </div>
                    </div>
                    <p>¿Todavía no tienes cuenta? <a href="#" onClick={onUserAsksForRegistration}>Registrate</a></p>
                </div>
            </div>
        </>
    )
}
