<template>
  <div class="users-container">
    <div class="user-list">
      <table-view ref="tableViewRef" :searchbar="false" :columns="columns" :data-source="fetch" @row-click="selectUser"
                  :mouse-over="true"></table-view>
    </div>
    <modal :state="showModal">
      <edit-user @close="closeModal" v-model:user="selectedUser" :is-new-user="isNewUser"></edit-user>
    </modal>
    <basic-button icon="Plus" @click="createUser">New User</basic-button>

  </div>
</template>

<script>

import {mapStores} from "pinia";
import {useUsersStore} from "@/store/users.js";
import TableView from "@/components/UI/TableView.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Modal from "@/components/UI/Modal.vue";
import AddApp from "@/components/layout/config/AddApp.vue";
import EditUser from "@/components/layout/config/EditUser.vue";
import logger from "@/logger.js";

export default {
  name: "Users",
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  components: {EditUser, AddApp, Modal, BasicButton, TableView},
  computed: {
    ...mapStores(useUsersStore)
  },
  watch: {
    async isSelected(newVal) {
      if (newVal === true) {
        await this.usersStore.load();
      }
    }
  },
  created() {
    this.usersStore.load();
  },
  methods: {
    async fetch(query) {
      await this.usersStore.setQuery(query);
      this.pagination = this.usersStore.pagination;
      return this.usersStore.users;
    },
    selectUser(user) {
      this.isNewUser = false;

      const groups = [...user.groups];

      this.selectedUser = {
        firstname: user.firstname,
        lastname: user.lastname,
        mail: user.mail,
        workday_id: user.workday_id,
        groups: groups
      }
      this.showModal = true;
    },
    createUser() {

      this.isNewUser = true;

      this.selectedUser = {
        firstname: null,
        lastname: null,
        mail: null,
        workday_id: null,
        groups: []
      }

      this.showModal = true;
    },
    async closeModal(save) {
      this.showModal = false;
      if (save) {
        await this.usersStore.updateUser(this.selectedUser);
        await this.usersStore.load();
        this.selectedUser = null;
        this.$refs.tableViewRef.reload('', 1);
      }
    },
  },
  data() {
    return {
      isNewUser: false,
      showModal: false,
      selectedUser: null,
      users: null,
      columns: [
        {
          key: 'workday_id',
          label: 'Workday ID',
        },
        {
          key: 'firstname',
          label: 'First name',
        },
        {
          key: 'lastname',
          label: 'Last name',
        },
        {
          key: 'mail',
          label: 'E-Mail',
        },

        {
          key: 'groups',
          label: 'User groups',
          badgeResolver: (value) => {

            const formattedValues = []
            value.slice(0, 5).forEach(v => formattedValues.push({text: v, variant: "secondary"}));

            if (value.length > 5)
              formattedValues.push({text: "...", variant: "secondary"});

            return formattedValues;
          }
        },
      ],
      pagination: {
        page: 1,
        pageCount: 1,
        totalCount: 0
      },
      pageSize: 20
    }
  }
}
</script>


<style scoped>

.users-container {
  padding: 2.4rem;
}

.user-list {
  margin-bottom: 2.4rem;
}

</style>