<template>
  <div class="userdetails card shadow" style="width: 35rem;">
    <div class="card" style="width: 35rem;">
      <div class="card-header text-white bg-info mb-3">
        {{ currentUser.user }}
      </div>
      <div class="card-body">
        <form @submit.prevent="save">
          <div class="form-group">
            <label for="country">Country</label>
            <select v-model="currentUser.country">
              <option disabled value="">Please select one</option>
              <option>AT</option>
              <option>RO</option>
              <option>BG</option>
            </select>
          </div>
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" v-model="currentUser.email">
          </div>
          <div class="form-group">
            <label for="role">Role</label>
             <select v-model="currentUser.role">
              <option disabled value="">Please select one</option>
              <option value="sys_admin">Sysadmin</option>
              <option value="waterway_admin">Waterway Admin</option>
              <option value="waterway_user">Waterway User</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "../assets/application.scss";

.userdetails {
  margin-top: 20px;
  width: 50vw;
}

.shadow {
  box-shadow: $basic-shadow-light !important;
}
</style>
<script>
import app from "../main";

export default {
  name: "userdetail",
  data() {
    return {
      currentUser: {},
      path: null
    };
  },
  watch: {
    user() {
      this.currentUser = { ...this.user };
      this.path = this.user.name;
    }
  },
  computed: {
    user() {
      return this.$store.getters["usermanagement/currentUser"];
    }
  },
  methods: {
    save() {
      this.$store
        .dispatch("usermanagement/saveCurrentUser", {
          path: this.user.user,
          user: this.currentUser
        })
        .then(() => {
          this.$store.commit("usermanagement/clearCurrentUser");
          this.$store.dispatch("usermanagement/loadUsers").catch(error => {
            const { status, data } = error.response;
            app.$toast.error({
              title: "Backend Error",
              message: `${status}: ${data}`
            });
          });
        })
        .catch(error => {
          const { status, data } = error.response;
          app.$toast.error({
            title: "Error while saving user",
            message: `${status}: ${data}`
          });
        });
    }
  }
};
</script>