<script>
import axios from 'axios'
import router from '@/router'
import EventBus from '@/utils/eventBus'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data() {
    return {
      result: {},
      user: {
        username: '',
        password: ''
      }
    }
  },
  created() {},
  mounted() {
    console.log('mounted() called......')
  },
  methods: {
    async loginData() {
      // Komunikace se serverem
      // Pokud zadané jméno a heslo odpovídá datům z databáze (uživatel je registrován)
      // vyčistí se localStorage -> nastaví se token a uživatelské jméno do localStorage
      // uživatel se přihlásí ke svému účtu
      try {
        const { data } = await axios.post('http://localhost:3001/login', this.user)
        if (data.status === true && this.user.username) {
          const groupsBackup = localStorage.getItem('groups')
          localStorage.clear()
          if (groupsBackup) {
            localStorage.setItem('groups', groupsBackup)
          }
          localStorage.setItem('x-access-token', data.token)
          localStorage.setItem('username', data.username)
          localStorage.setItem('userId', data.userId)
          this.closeModal()
          EventBus.dispatchEvent(new Event('user-logged-in'))
          router.push('/')
          window.toastr.success('Byli jste úspěšně přihlášeni')
        } else {
          window.toastr.warning('Zadané údaje nesedí')
        }
      } catch (err) {
        window.toastr.error('Chyba, zkuste to prosím znovu', 'Error')
      }
    },
    closeModal() {
      document.getElementById('id01').style.display = 'none'
    }
  }
}
</script>

<template>
  <div id="id01" class="modal">
    <form @submit.prevent="loginData" class="modal-content animate" method="post">
      <div class="imgcontainer">
        <span @click="closeModal" class="close" title="Zavřít Okno">&times;</span>
        <img src="/src/assets/pictures/avatar.png" alt="Avatar" class="avatar" />
      </div>

      <div class="container">
        <label><b>Přihlašovací jméno</b></label>
        <input
          type="text"
          v-model="user.username"
          placeholder="Vložte přihlašovací jméno"
          name="username"
          required
        />

        <label><b>Heslo</b></label>
        <input
          type="password"
          v-model="user.password"
          placeholder="Vložte heslo"
          name="password"
          required
        />

        <button type="submit">Login</button>
      </div>

      <div class="container" style="background-color: #f1f1f1">
        <button type="button" @click="closeModal" class="cancelbtn">Zrušit</button>
      </div>
    </form>
  </div>
</template>
