<template>
  <div>
    <script type="text/x-template" id="modal-template">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">
              <form id="login-form" @submit.stop.prevent="submit">

                <div class="modal-header">
                  <slot name="header">
                    Authenticate!
                  </slot>
                </div>

                <div class="modal-body">
                  <slot name="body">
                    <div v-if="errors.length">
                      <b>Please correct the following error(s):</b>
                      <ul>
                        <li v-for="(err, index) in errors"> {{ errors }}</li>
                      </ul>
                    </div>

                    <label>Login:
                      <input type="text" name="username" v-model="username">
                    </label>
                    <label>Password:
                      <input type="password" name="password" v-model="password">
                    </label>
                  </slot>
                </div>

                <div class="modal-footer">

                  <slot name="footer">
                    <a href="#" class="modal-default-button" @click="$emit('close')">
                      Close
                    </a>
                    <button type="submit" class="modal-default-button">Submit</button>
                  </slot>
                </div>

              </form>
            </div>
          </div>
        </div>
      </transition>
    </script>

    <div class="profile-form">

      <button id="show-modal" v-if="isGuest" @click="showModal = true">Login {{ currentUsername }}</button>
      <div v-else class="user-panel">
        <a href="/api/logout">Exit</a>

        <div class="identity" v-text="username"></div>
      </div>


<!--      <button @click="authenticated">authenticated</button>-->
      <modal v-if="showModal" @close="showModal = false">

        <h3 slot="header">Authenticate</h3>
      </modal>
    </div>
  </div>
</template>


<script>
import Modal from 'vue-js-modal';
import axios from 'axios';

export default {
  name: 'Profile',
  data() {
    return {
      errors: [],
      showModal: false,
      isGuest: true,
      username: '',
      err: '',
    };
  },
  computed: {
    currentUsername() {
      return window.currentUsername;
    },
  },
  methods: {
    authenticated(username) {
      this.isGuest = false;
      this.username = username;
    }
  },
  components: {
    Modal: {
      template: "#modal-template",
      data() {
        return {
          errors: ['asd', 'sdfdfg'],
          username: '[email protected]',
          password: 'pa$$w0rd',
        };
      },
      methods: {
        submit: function() {
          if(!this.username) {
            this.errors.push("Name required.");
            return false;
          }
          axios.post('/api/login',{
            /*headers: {
              'Content-type': 'application/x-www-form-urlencoded',
            },*/
            params: {
              username: this.username,
              password: this.password
            }})
              .then(response => {
                if(response.data.success) {
                  this.$parent.authenticated(response.data.identity.username);
                  this.$emit('close');
                }
              })
              .catch(error => {});
        }
      },

    }
  },

  created(){
    if(window.currentUsername) {
      this.authenticated(window.currentUsername);
    }
  },
  mounted() {

  },
};
</script>