'use client'

import { serverAttemptAuthenticateUser } from "@/app/lib/actions/actions";
import { useFormState, useFormStatus } from "react-dom";


export default function CLoginForm(){
    const [loginResult, dispatch] = useFormState(serverAttemptAuthenticateUser, undefined);

    return (
    <form className="bg-background-400 border-4 border-primary-500 drop-shadow-md w-fit p-3 rounded-lg flex flex-col gap-1" action={dispatch}>
        <label htmlFor="input_username">Username</label>
        <input type="text" name="input_username" id="input_username" className="bg-secondary border-2 border-primary rounded-lg drop-shadow-md" />
        <label htmlFor="input_password">Password</label>
        <input type="password" name="input_password" id="input_password" className="bg-secondary outline-primary border-2 border-primary rounded-lg drop-shadow-md shadow-inner shadow-primary" />
        <LoginButton></LoginButton>
        <div>{loginResult?.errorMessage && <p>{loginResult?.errorMessage}</p>}</div>
        <div className="flex flex-col w-[400px] break-words ">
            <p>{""+loginResult?.cookie}</p>
        </div>
    </form>);
}

function LoginButton() {
    const { pending } = useFormStatus()
   
    return (
      <button aria-disabled={pending} className="mr-auto bg-secondary-200 outline outline-2 border-5 p-3 mt-3 rounded-lg outline-secondary-500  shadow-primary" type="submit">
        {!pending ? 'Sign In' : 'Pending Sign In...'}
      </button>
    )
  }