import { createRef, useEffect, useMemo, useState } from "react"
import { Navigate } from "react-router-dom"
import { authorizeLogin, isLoggedIn, LoginState, useClearToken } from "../authorization"

export function Login() {
    var [username, setUsername] = useState("")
    var [password, setPassword] = useState("")
    var [loginState, setLoginState] = useState(isLoggedIn())

    var usernameRef = createRef<HTMLInputElement>()
    var passwordRef = createRef<HTMLInputElement>()

    var login = (e: React.ChangeEvent<HTMLFormElement>) => {
        e.preventDefault()
        if (username.length === 0 || password.length === 0) {
            setLoginState(LoginState.Invalid)
            return
        }
        authorizeLogin(username, password, setLoginState)
    }

    useMemo(() => {
        if (loginState === LoginState.Invalid) {
            setLoginState(LoginState.No)
        }
    }, [username, password])

    useEffect(() => {
        if (loginState === LoginState.Invalid) {
            usernameRef.current?.setCustomValidity("Invalid username or password")
            passwordRef.current?.setCustomValidity("Invalid username or password")
        } else {
            usernameRef.current?.setCustomValidity("")
            passwordRef.current?.setCustomValidity("")
        }
    }, [loginState])

    return (
        <div className="flex w-full h-full justify-center items-center align-middle">
            <form onSubmit={login}>
                <div className="flex justify-center items-center align-middle my-2">
                    <input type="text" ref={usernameRef} onChange={e => setUsername(e.target.value)}
                        className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
                    <input type="password" ref={passwordRef} onChange={e => setPassword(e.target.value)}
                        className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
                </div>
                <div className="flex justify-center items-center align-middle my-2">
                    <button className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 hover:bg-gray-700 active:bg-gray-800 fill-gray-400 focus:fill-gray-200 px-3 py-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
                        <svg viewBox="0 0 1000 1000" height="16px">
                            <path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
                        </svg>
                    </button>
                </div>
            </form>
            {
                loginState === LoginState.Yes && <Navigate to="/" replace={true} />
            }
        </div >
    )
}

export function Logout() {
    const loggedOut = useClearToken()
    return (
        <>
            {
                loggedOut && <Navigate to="/login" replace={true} />
            }
        </>
    )
}