<script lang="ts">
  import { now } from "svelte/internal";
  import Card from "../pieces/Card.svelte";
  import { createEventDispatcher } from 'svelte';
  // import UserStore from './stores/UserStore';

  // prolly Typescript-ify
  //let fields{question:string, answerA:string, answerB: string} = { question: '', answerA: '', answerB: ''};
  let login = { username: '', password: ''};
  // let's us track any errors in a submited form
  let errors = { username: '', password: ''};
  let valid:boolean = false;

  const dispatch = createEventDispatcher();

  const loginHandler = () => {
    valid = true;

    if (login.username !== $UserStore.username) {
      valid = false;
      errors.username = "wrong example username."
    } else {
      // reseting the value of errors
      errors.username = "";
    }
    if (login.password !== $UserStore.password) {
      valid = false;
      errors.password = "wrong example password."
    } else {
      // reseting the value of errors
      errors.password = "";
    }

    if (valid) {
      $UserStore.loggedIn = true;
      $UserStore.status = 'online';

      dispatch('login');
    }

  };


</script>

<div class="login">
<Card>

    <form on:submit|preventDefault={loginHandler}>
      <div class="form-field">
        <input type="text" id="username" placeholder="username" bind:value={login.username}>
        <div class="error">{ errors.username }</div>
      </div>
      <div class="form-field">
        <input type="password" id="password" placeholder="password" bind:value={login.password}>
        <div class="error">{ errors.password }</div>
      </div>
      <!-- type="" but flat={}  cuz type is a string but flat is a bool--> 
      <!-- <Button type="secondary" flat={true}>Add Poll</Button> -->
      <button>Login</button>
    </form>

</Card>
</div>

<style>
  form{
    width: 200px;
    margin: 0 auto;
    text-align: center;
  }
  .form-field{
    margin: 18px auto;
  }
  input{
    width: 100%;
    border-radius: 6px;
  }
  .login{
    /* display: grid;
    grid-template-columns: 1fr; */
    max-width: 350px;
  }

  .error{
    font-weight: bold;
    font-size: 12px;
    color: #d91b42;
  }
</style>