<script setup lang="ts">
import { AuthenticationService } from '@/services/AuthenticationService'
import { inject, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const password = ref('')

const authService = inject<AuthenticationService>('auth')

async function login() {
  try {
    await authService?.login(username.value, password.value)
    router.push({ name: 'home' })
  } catch (error) {
    alert('Invalid username or password')
  }
  // if (username.value === 'admin' && password.value === 'password') {
  // localStorage.setItem('token', 'true')
  // router.push({ name: 'home' })
  // } else {
  //   alert('Invalid username or password')
  // }
}
</script>

<template>
  <div class="login">
    <h1>Login</h1>
    <form class="form" @submit.prevent="login">
      <div class="field">
        <label class="label">Username</label>
        <div class="control">
          <input class="input" type="text" v-model="username" placeholder="Username" />
        </div>
      </div>
      <div class="field">
        <label class="label">Username</label>
        <div class="control">
          <input class="input" type="password" v-model="password" placeholder="Password" />
        </div>
      </div>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-primary" type="submit">Login</button>
        </div>
        <!-- <div class="control">
          <button class="button">Cancel</button>
        </div> -->
      </div>
    </form>
  </div>
</template>
