<!--
  This file is part of gms-ui
  Copyright (C) 2021 Istituto Nazionale di Astrofisica
  SPDX-License-Identifier: GPL-3.0-or-later
-->
<template>
<div class="mt-sm-3" v-if="user">
  <b-button variant="primary" class="float-right" v-on:click="back()">Back</b-button>
  <h5><strong>{{user.displayName}}</strong>:</h5>

  <b-container class="mt-sm-5">
    <b-row>

    </b-row>
    <b-row>
      <b-col class="text-left">
        <h5>Is member of</h5>
        <div v-if="groups.length === 0">
          No groups to show
        </div>
        <div v-if="groups.length > 0">
          <ul>
            <li v-for="group in groups" v-bind:key="group.groupId">
              <a href="#" v-on:click="openGroup(group.groupId)">
                {{group.groupCompleteName.join(' / ')}}
              </a>
            </li>
          </ul>
        </div>

        <h5 class="mt-5 mb-3">User info</h5>
        <p><strong>User id</strong>: {{user.id}}</p>
        <p><strong>Identities ({{user.identities.length}})</strong>:</p>
        <b-row>
          <b-col lg="10">
            <b-list-group>
              <b-list-group-item :class="{ 'list-group-item-info': identity.primary }" v-for="(identity, index) in user.identities" v-bind:key="index">
                <dl class="mb-0 ml-0 row">
                  <dt class="col-3">Type</dt><dd class="col-9">{{identity.type}}</dd>
                  <dt class="col-3">Email</dt><dd class="col-9">{{identity.email}}</dd>
                  <dt class="col-3" v-if="identity.type === 'eduGAIN'"><abbr title="EduPerson Principal Name, an unique identifier used into federations.">EPPN</abbr></dt>
                  <dd class="col-9" v-if="identity.type === 'eduGAIN'">{{identity.typedId}}</dd>
                </dl>
              </b-list-group-item>
            </b-list-group>
          </b-col>
        </b-row>
      </b-col>
      <b-col v-if="permissions.length > 0">
        <h5>Permissions</h5>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Group</th>
              <th>Permission</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p, rowIndex) in permissions" v-bind:key="rowIndex">
              <td>
                <a href="#" v-on:click="openGroup(p.groupId)">
                  {{p.groupCompleteName.join(' / ')}}
                </a>
              </td>
              <td>{{p.permission}}</td>
            </tr>
          </tbody>
        </table>
      </b-col>
    </b-row>
  </b-container>
</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'UserSearchResult',
  computed: mapState({
    user: state => state.model.userSearchResults.user,
    groups: state => state.model.userSearchResults.groups,
    permissions: state => state.model.userSearchResults.permissions
  }),
  created() {
    this.openUserPage();
  },
  watch: {
    // call again the method if the route changes
    '$route': 'openUserPage'
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    openUserPage() {
      this.$store.dispatch('openUserPage', this.$route.params.id);
    },
    openGroup(groupId) {
      this.$store.dispatch('openGroup', groupId);
    }
  }
}
</script>