import React from 'react';
import { RouteComponentProps } from '@reach/router';
import clsx from 'clsx';
import { LockClosedIcon } from '@heroicons/react/solid';

import { performApiCall } from 'src/services/api';

type LoginProps = RouteComponentProps;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function Login(_: LoginProps) {
  const handleSubmit = async () => {
    try {
      const { data } = await performApiCall({
        path: '/login',
        method: 'POST',
      });

      if (data.authorizationUrl) {
        window.location.href = data.authorizationUrl;
      }
    } catch (e: any) {
      // continue
    }

    // @ts-ignore
    // if (res.ok) {
    //   showToast('Logged in!');
    // } else {
    //   showToast('Username or password incorrect', ToastType.Error);
    // }
  };

  // useEffect(() => {
  //   if (isValid(auth)) {
  //     navigate('/dashboard');
  //   }
  // }, [auth]);

  // if (isValid(auth)) {
  //   return null;
  // }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="flex justify-center">
          <img className="lg:block" src="assets/logo.svg" alt="Stackspin" />
          <h2 className="mt-6 text-center text-xl font-bold text-gray-900 sr-only">Sign in</h2>
        </div>
        <button
          onClick={handleSubmit}
          type="button"
          className={clsx(
            'group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-dark hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
          )}
        >
          <span className="absolute left-0 inset-y-0 flex items-center pl-3">
            <LockClosedIcon className="h-5 w-5 text-white group-hover:text-primary-light" aria-hidden="true" />
          </span>
          Sign in
        </button>
      </div>
    </div>
  );
}