<template>
  <div id="page-content-wrapper" class="main">
    <fetch-profile v-if="userData !== null">
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading || response === null"></div>
          <div v-else>
<!--            {{response}}-->
            <h4 class="round">User Profile</h4>
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="container-fluid col-md-12">
                  <div class="row">
                    <div class="text col-sm-3">User Name</div>
                    <div class="col-sm-9">
                      <b>{{response.username}}</b>
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Email</div>
                    <div class="col-sm-9">
                      {{response.email}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Role</div>
                    <div class="col-sm-9">
                      {{setRole(response.role.name)}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Affiliation</div>
                    <div class="col-sm-9">
                      {{response.Affiliation}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Link</div>
                    <div class="col-sm-9">
                      {{response.ProfileLink}}
                    </div>
                  </div>

                  <div class="row">
                    <div class="text col-sm-3">Joined</div>
                    <div class="col-sm-9">
                      {{response.createdAt}}
                    </div>
                  </div>
                  <div class="row">
                    <div class="text col-sm-3">Updated</div>
                    <div class="col-sm-9">
                      {{response.updatedAt}}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <button class="btn btn-primary" @click="$router.push('/updateitem/new')">
              Create new Update Item
            </button>

          </div>
        </slot>
      </template>
    </fetch-profile>

    <h4 class="round">Update Items</h4>
    <fetch-update-items v-if="userData !== null">
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading || response === null"></div>
          <div v-else>
            <update-item-table id="update-item-table" :data="response.data">
            </update-item-table>
          </div>
        </slot>
      </template>
    </fetch-update-items>
    <fetch-users v-if="getRole ==='Administrator'">
      <template slot-scope="{response, loading}">
        <slot :response="response" :loading="loading">
          <div v-if="loading || response === null"></div>
          <div v-else>
            <h4 class="round">User List</h4>
           <user-table id="usersTable" :data="response" />
          </div>
        </slot>
        </template>
    </fetch-users>
  </div>
</template>

<script>
import FetchProfile from "@/components/CMS/fetchProfile";
import FetchUpdateItems from "@/components/CMS/fetchUpdateItems";
import UpdateItemTable from "@/components/UpdateItemTable";
import FetchUsers from "@/components/CMS/fetchUsers"
import UserTable from '../components/UserTable.vue';

const _ = require('lodash')

export default {
  name: 'ProfilePage',
  components: {
    FetchProfile, FetchUpdateItems, UpdateItemTable,
    UserTable, FetchUsers
  },
  props: {
    msg: String
  },
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    userData: function () {
      return this.$store.getters['User/userData']
    },
    getRole: function(){
      return this.$store.getters['User/userRole']
    }
  },
  methods: {
    setRole(roleName) {
      //console.log("role name is,", roleName);
      const vm = this
      window.localStorage.setItem('roleName', roleName)
      vm.$store.dispatch('User/setUserRole', roleName)
      return roleName
    },
  },
  mounted: function () {
    const vm = this
    
    if(vm.userData === null) {
      this.$router.push('/login')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

.panel {
  font-size: 1.2rem;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

</style>