import { useEffect, useState } from "react"
import { useLtoContext } from "../context/LtoContext"
import useLocalStorage from "use-local-storage"



export const LoginWidget = () => {
  const {loggedIn, login, logout} = useLtoContext()

  const [username, setUsername] = useLocalStorage("input_username","", {syncData: false})
  const [password, setPassword] = useState("")
  return <>
    <div className="flex flex-col border border-gray-400">
      <div className="flex flex-col">
        <div className="flex flex-row bg-blue-400">
          <span className="text-white pb-1 pl-2 m-y-1">
            account
          </span>
        </div>
        <div className="flex flex-row flex-wrap gap-1 p-2 justify-center">
          <div>
            <input
              onChange={(e)=>{
                setUsername(e.target.value)
              }}
              value={username}
              placeholder="username" className="w-32 pl-2 pb-1 border border-gray-600"/>
          </div>
          <div>
            <input
              onChange={(e)=>{
                setPassword(e.target.value)
              }}
              value={password}
              type="password" placeholder="password" className="w-32 pl-2 pb-1 border border-gray-600"/>
          </div>
        </div>
        <div className="flex flex-row p-2 justify-center gap-4">
          <button
            onClick={async ()=>{
              login(username,password).catch((e)=>{
                alert(e.toString())
              })
            }}
            className="border border-gray-600 px-2 py-1 hover:bg-blue-200">
            login
          </button>
          <button
            onClick={()=>{
              logout()
              return
            }}
            disabled={!loggedIn} className="border border-gray-600 px-2 py-1 hover:bg-red-200 disabled:border-gray-400 disabled:text-gray-300 disabled:bg-white ">
            logout
          </button>
        </div>
      </div>
    </div>
  </>
}