import { Component, createEffect, createSignal } from 'solid-js';
import RestClient from '../api/RestClient';
import { setStore, store, User } from '../App';
import Button from '../ui/Button';

type LoginRequest = {
  login: string;
  password: string;
};

const [loggedInUser, setLoggedInUser] = createSignal();
export { loggedInUser };

const Login: Component = () => {
  const [loginRequest, setLoginRequest] = createSignal<LoginRequest>({
    login: '',
    password: '',
  });
  const [login, setLogin] = createSignal('');
  const [password, setPassword] = createSignal('');

  // Populate the current user outside the JSX (we need createEffect for this!)
  createEffect(async () => {
    if (loginRequest().login.trim() === '' || loginRequest().password.trim() === '') {
      return;
    }
    const user = (await RestClient.POST(
      '/login',
      JSON.stringify(loginRequest())
    )) as User;
    if (user.id === undefined) {
      console.log(user);
      return;
    }
    setStore({
      ...store,
      user,
    });
    window.location.href = '/';
  });

  return (
    <div class='grid h-screen place-items-center'>
      <div class='block p-6 rounded-lg shadow-lg bg-white max-w-sm'>
        <form>
          <div class='form-group mb-6'>
            <label for='username' class='form-label inline-block mb-2 text-gray-700'>
              Login
            </label>
            <input
              type='text'
              class='form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
              id='username'
              placeholder='Username'
              onInput={(e) => setLogin(e.currentTarget.value)}
              value={login()}
            />
          </div>
          <div class='form-group mb-6'>
            <label for='Password' class='form-label inline-block mb-2 text-gray-700'>
              Password
            </label>
            <input
              type='password'
              class='form-control block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
              id='Password'
              placeholder='Password'
              onInput={(e) => setPassword(e.currentTarget.value)}
              value={password()}
            />
          </div>
          <Button
            fullWidth
            onClick={() => {
              console.log(login(), password());
              setLoginRequest({ login: login(), password: password() });
            }}
          >
            Sign in
          </Button>
          <p class='text-gray-800 mt-6 text-center'>
            Want to track your todo{"'"}s?{' '}
            <a
              href='#!'
              class='text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out'
            >
              Register
            </a>
          </p>
        </form>
      </div>
    </div>
  );
};

export default Login;