<!-- components/Users.vue -->
<template>
  <div>
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h3>
            <div class="text-center">
              <font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousUser()"/>
              <input type="number" style="font-size: small; max-width: 48px; text-align: center;"
                     v-model="new_user_id" @blur="manually_set_user_id()"
                     @input="manually_set_user_id()">
              <font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextUser()"/>
            </div>
          </h3>

          <h3 class="title">{{ user.id }} – {{ get_user_display_name() }}</h3>

          <p><strong>{{ $t('nickname') }}:&nbsp</strong>{{ user.nickname }}</p>
          <p><strong>{{ $t('first_name') }}:&nbsp</strong>{{ user.first_name }}</p>
          <p><strong>{{ $t('last_name') }}:&nbsp</strong>{{ user.last_name }}</p>

          <hr/>
          <!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
          <p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="user.role">{{ user.role }}</span><span
              v-else>{{ $t('no specifc role') }}</span></p>
          <p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in user.groups">{{ g.name }}, </span></p>
          <p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
          <ul>
            <li v-for="p in user.effective_permissions">{{ p.name }}</li>
          </ul>

          <hr/>

          <p class="subtitle error-msg">{{ errorMsg }}</p>
          <b-form inline @submit="delete_user">
            <b-button style="margin-right: 5px;" type="submit" :disabled="!delete_checked" variant="danger">{{ $t('delete.user') }}</b-button>
            <b-form-checkbox v-model="delete_checked">{{ $t('check.to.allow.deletion') }}</b-form-checkbox>
          </b-form>

        </div>
      </div>
    </section>

  </div>
</template>

<script>
import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../../utils';
import getRepository from '@/api/RepositoryFactory';

const UserRepository = getRepository('user');

export default {
  props: ['user_id'],
  data() {
    return {
      current_user_id: this.user_id == null ? 1 : parseInt(this.user_id),
      current_user_index: null,
      new_user_id: this.current_user_id,
      isLoading: false,
      users: [],
      delete_checked: false,
      errorMsg: '',
    };
  },
  methods: {
    fetch() {
      this.isLoading = true;
      // const { data } = await GroupRepository.get();
      UserRepository.getUsers()
          .then((response) => {
            this.users = response.data;
            this.isLoading = false;
          });

    },
    get_user_display_name() {
      let display_name = null;
      if(this.user.first_name != null)
       display_name = this.user.first_name;
      if(this.user.last_name != null)
        if(display_name != null) {
          display_name += " " + this.user.last_name;
        } else {
          display_name = this.user.last_name;
        }
      if (this.user.nickname != null && this.user.nickname !== "") {
        if (display_name.trim() === "") {
          display_name = this.user.nickname;
        } else {
          display_name += " (" + this.user.nickname + ")";
        }
      }
      if (display_name == null || display_name.trim() === "") {
        display_name = this.user.email;
      }

      return display_name
    },
    calculate_current_user_index() {
      this.current_user_index = this.userIds.findIndex((id) => {
        return id === this.current_user_id;
      });
    },
    previousUser() {
      if (null == this.current_user_index) {
        this.calculate_current_user_index();
      }
      if (this.current_user_index === 0) this.current_user_index = this.userIds.length - 1;
      else this.current_user_index = this.current_user_index - 1;
      this.current_user_id = this.userIds[this.current_user_index];
      this.new_user_id = this.current_user_id;
    },
    nextUser() {
      if (null == this.current_user_index) {
        this.calculate_current_user_index();
      }
      if (this.current_user_index === this.userIds.length - 1) this.current_user_index = 0;
      else this.current_user_index = this.current_user_index + 1;
      this.current_user_id = this.userIds[this.current_user_index];
      this.new_user_id = this.current_user_id;
    },
    manually_set_user_id() {
      if (this.new_user_id == null || this.new_user_id === '') {
        this.new_user_id = this.current_user_id;
        return;
      }
      if (this.userIds.includes(parseInt(this.new_user_id))) {
        this.current_user_id = parseInt(this.new_user_id);
      }
      this.new_user_id = this.current_user_id;
    },
    delete_user(){
      alert("Not implemented!");
    }
  },
  mounted() {
    this.fetch();
  },
  beforeDestroy() {
    // todo
  },
  computed: {
    columns() {
      if (this.users.length === 0) {
        return [];
      }
      let columns = Object.keys(this.users[0]);
      columns = columns.filter((value) => {  // filter to only show some fields
        return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
      });
      return columns;
    },
    user() {
      if (this.users.length === 0) {
        return [];
      }
      return this.users.filter((value) => value.id.toString() === this.current_user_id.toString()).pop();
    },
    userIds() {
      let ids = [];
      this.users.forEach((elem) => {
        ids.push(parseInt(elem.id));
      });
      return ids;
    },
  },
};
</script>

<style lang="scss">
.error-msg {
  color: red;
  font-weight: bold;
}
</style>
