<template>
  <div class="userdetail card">
    <div @click="showDetails" class="card-header bg-light" id="headingOne">
      <h5 class="mb-0">
        <div class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <div class="d-flex d-flex-row">
            <div class="name">Name: {{this.user.user}}</div>
            <div class="mail">Email: {{this.user.email}}</div>
            <div class="country">Country: {{this.user.country}}</div>
            <div class="role">Role: {{this.user.role}}</div>
          </div>
        </div>
      </h5>
    </div>
    <div id="collapseOne" :class="collapseStyle" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div>
          <form class="details" @submit.prevent="editUser">
            <div class="form-group"><label for="user">User</label><input class="form-control" id="user" v-model="currentUser.user"></div>
            <div class="form-group"><label for="email">Email</label><input class="form-control" id="email" v-model="currentUser.email"></div>
            <div class="form-group">
              <label for="country">Country</label>
              <select id="country"  class="form-control" 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="role">Role</label>
              <select id="role"  class="form-control" 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 class="btn btn-primary pull-right">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "../assets/application.scss";
.userdetail {
  text-align: left !important;
}
.details {
  width: 30vw;
  height: 45vh;
}
.name,
.mail,
.country,
.role {
  padding-right: $large-offset;
}
</style>
<script>
import { HTTP } from "../lib/http";
import app from "../main";
import store from "../store";

export default {
  name: "userdetail",
  props: ["user"],
  data() {
    return {
      currentUser: Object.assign({}, this.user),
      show: false
    };
  },
  computed: {
    collapseStyle() {
      return {
        collapse: true,
        show: this.show
      };
    }
  },
  methods: {
    editUser() {
      HTTP.put("/users/" + this.user.user, {
        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
      })
        .then(() => {
          this.show = false;
          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: "Backend Error",
            message: `${status}: ${data}`
          });
        });
    },
    showDetails() {
      this.show = !this.show;
    }
  }
};
</script>