import {useRouter} from "next/router";

import SeoConfig from "../../components/seo-config/seo-config";
import Layout from "../../components/layout/layout";
import {createJwtToken} from "../../libs/auth";

import styles from './index.module.scss';

export function SignIn({seo, menuFooter}) {
  const router = useRouter();

  const onSubmit = async (e) => {
    e.preventDefault();
    const result = await createJwtToken(e.target.email.value, e.target.password.value);
    if (result.ok) {
      await router.replace('/');
      return;
    }

    alert('Credential is not valid');
  };

  return (
    <>
      <SeoConfig {...seo}/>
      <Layout showHeaders={false} showFooter={false} menuFooter={menuFooter}>
        <div className={styles['page-sign-in']}>
          <main className={styles['section']}>
            <div className="container max-w-5xl px-6 py-4 md:py-12 h-full mx-auto relative -top-[25px] md:-top-[50px]">
              <div className="flex flex-col justify-center items-center flex-wrap h-full g-6 text-gray-800">
                <header className="max-w-[440px] text-center block">
                  <a href="https://flowbite.com/" className="flex items-center justify-center mb-6">
                    <img src="https://flowbite.com/docs/images/logo.svg" className="h-6 mr-3 sm:h-9"
                         alt="Flowbite Logo"/>
                    <span
                      className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
                  </a>

                  <h3
                    className="mb-4 text-2xl font-extrabold leading-none text-center tracking-tight text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
                    Connexion à votre compte
                  </h3>
                  <p className="mb-6 text-md font-normal text-gray-500 lg:text-xl dark:text-gray-400">
                    Vous n&apos;êtes pas encore inscrit ? <br/><a href="/sign-up"
                                                                  className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                                                                  target="_self">Créez un compte maintenant</a>.
                  </p>
                </header>
                <section
                  className="w-full max-w-[440px] p-4 bg-white border border-gray-200 rounded-lg sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
                  <div className="w-full">
                    <form onSubmit={onSubmit}>
                      <div className="mb-6">
                        <label htmlFor="email"
                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                          E-mail
                        </label>
                        <input type="email"
                               id="email"
                               name="email"
                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
                      </div>
                      <div className="mb-6">
                        <label htmlFor="password"
                               className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                          Mot de passe
                        </label>
                        <input type="password"
                               id="password"
                               name="password"
                               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
                      </div>
                      <div className="flex justify-between items-center mb-6">
                        <div className="form-group form-check flex items-center">
                          <input id="default-checkbox" type="checkbox" value=""
                                 className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"/>
                          <label htmlFor="default-checkbox"
                                 className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                            Rester connecté ?
                          </label>
                        </div>
                        <a href="/lost-password"
                           className="text-blue-600 hover:text-blue-700 focus:text-blue-700 active:text-blue-800 duration-200 transition ease-in-out text-sm">
                          Mot de passe oublié ?
                        </a>
                      </div>
                      <button type="submit"
                              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 w-full"
                              data-mdb-ripple="true"
                              data-mdb-ripple-color="light">
                        Connexion
                      </button>
                    </form>
                  </div>
                </section>
              </div>
            </div>
          </main>
        </div>
      </Layout>
    </>
  );
}

export default SignIn;