import React, { useState } from "react";
import { useAuth } from "components/Login/authcontext";

const LoginBox: React.FC = () => {
  const [password, setPassword] = useState("");
  const [focused, setFocused] = useState(false);
  const { login, loginFailed } = useAuth();

  const passwordLabelClassName = `absolute inset-y-0 left-0 px-4 font-sans text-gray-600 ${
    focused || password
      ? "transform scale-75 -translate-y-5 -translate-x-2"
      : ""
  } transition-transform pointer-events-none`;

  function handleSubmit(e: React.SyntheticEvent): void {
    e.preventDefault();
    login(password);
    setPassword("");
  }

  return (
    <div className="space-y-4">
      {loginFailed ? (
        <div className="text-red-600">Invalid credentials.</div>
      ) : null}
      <form onSubmit={handleSubmit} className="space-y-6">
        <div>
          <label htmlFor="password" className="relative">
            <span className={passwordLabelClassName}>Password</span>
          </label>
          <input
            name="password"
            type="password"
            value={password}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            onChange={(event) => setPassword(event.target.value)}
            className="bg-transparent p-4 border border-gray-300 leading-snug focus:outline-none focus:border-gray-500 rounded"
          />
        </div>
        <input
          type="submit"
          value="Log In"
          className="w-full px-4 py-2 font-sans font-semibold text-white bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 rounded-lg"
        />
      </form>
    </div>
  );
};

export default LoginBox;