import ferinesiaLogo from "@/assets/logos/ferinesia-logo-thin.png"
import { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"

/**
 * Copyright: Task Master (https://tailwindflex.com/@task_master)
 * URL: https://tailwindflex.com/@task_master/login-form-with-social-login-buttons
 */

export interface InputValidationError{
  type: string,
  message: string
}

export default function Login() {
  const [isLoading, setIsLoading] = useState(false)

  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col justify-center sm:py-12">
      <div className="p-10 xs:p-0 mx-auto md:w-full md:max-w-md">
        <div className="flex flex-col items-center">
          <img src={ferinesiaLogo} width={128} />
          <h1 className="font-bold text-center text-2xl mb-5">
            <span className="text-blue-500">ferinesia</span>
            <span className="text-yellow-500">.com</span>
          </h1>
        </div>
        <div className="bg-white shadow w-full rounded-lg pt-4 pb-4">
          <div className="px-5 py-2">
            <label className="font-semibold text-sm text-gray-600 pb-1 block">
              Username
            </label>
            <input
              type="text"
              className="border rounded-lg px-3 py-2 mt-1 mb-1 text-sm w-full"
              onInput={e => setUsername(e.currentTarget.value)}
            />
            {/* {
              inputValidationMsg.find(x => x.type == "username") && 
                <span className="text-red-500">{inputValidationMsg.find(x => x.type == "username")!.message}</span>
            } */}
          </div>
          <div className="px-5 py-2">
            <label className="font-semibold text-sm text-gray-600 pb-1 block">
              Password
            </label>
            <input
              type="password"
              className="border rounded-lg px-3 py-2 mt-1 mb-1 text-sm w-full"
              onInput={e => setPassword(e.currentTarget.value)}
            />
            {/* {
              inputValidationMsg.find(x => x.type == "password") && 
                <span className="text-red-500">{inputValidationMsg.find(x => x.type == "password")!.message}</span>
            } */}
          </div>
          <div className="px-5 py-2">
            <button
              // onClick={doLogin}
              disabled={isLoading}
              type="button"
              className="transition duration-200 bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 focus:shadow-sm focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 text-white w-full py-2.5 rounded-lg text-sm shadow-sm hover:shadow-md font-semibold text-center flex flex-row justify-center align-middle items-center disabled:bg-gray-300"
            >
              {
                isLoading && <span className="animate-spin inline-block size-4 border-[3px] border-current border-t-transparent text-white rounded-full mr-2" role="status" aria-label="loading">
                  <span className="sr-only">Loading...</span>
                </span>
              }
              <span className="inline-block mr-2">{isLoading ? "Mohon Tunggu" : "Login"}</span>
              {
                !isLoading && <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                className="w-4 h-4 inline-block"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 8l4 4m0 0l-4 4m4-4H3"
                />
              </svg>
              }
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
