<template>
  <base-page>
    <ServerDatatable title="User" :api="UserApi" :headers="headers" path="user">
      <template #left-action="{ content }">
        <button
          @click="handleRoleButtonClick(content.id)"
          type="button"
          class="btn btn-xs btn-info me-1"
          data-toggle="modal"
        >
          Role
        </button>
      </template>
    </ServerDatatable>
    <div
      ref="modal"
      class="modal fade ms-5"
      id="addRoleModal"
      tabindex="-1"
      role="dialog"
    >
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Tambah Role</h5>
            <button
              class="btn btn-outline-primary"
              type="button"
              data-bs-dismiss="modal"
              aria-label="Close"
            >
              <span class="ni ni-xmark"></span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row align-items-center">
                <div class="col-sm-10 mb-2">
                  <!-- <vue-multiselect
                    v-model="selectedRoleId"
                    :searchable="true"
                    :options="roles"
                  /> -->
                </div>
                <div class="col-sm-2">
                  <div
                    v-if="isAddingRole"
                    class="spinner-border text-primary"
                  ></div>
                  <button
                    v-if="!isAddingRole"
                    @click="addUserRole"
                    type="button"
                    class="btn btn-xs btn-primary btn-block"
                  >
                    Tambah Role
                  </button>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <table class="table align-items-center table-hover">
                <thead>
                  <tr>
                    <th class="text-center">Role</th>
                    <th class="text-center">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="isFetchingUserRole">
                    <td :colspan="2">
                      <div class="d-flex justify-content-center">
                        <div class="spinner-border text-primary"></div>
                      </div>
                    </td>
                  </tr>
                  <template v-if="!isFetchingUserRole">
                    <tr v-for="role in userRoles">
                      <td class="text-center">@{{ role.name }}</td>
                      <td class="text-center">
                        <div
                          v-if="isRemoveRole"
                          class="spinner-border text-primary"
                        ></div>
                        <button
                          v-if="!isRemoveRole"
                          @click="removeUserRole(role.id)"
                          type="button"
                          class="btn btn-xs btn-danger"
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-page>
</template>
<script setup lang="ts">
import BasePage from "./../../components/Page/BasePage.vue";
import { UserApi } from "@/api/user.js";
import ServerDatatable from "@/components/Common/ServerDatatable.vue";
import { ref, onMounted, inject } from "vue";
import * as bootstrap from "bootstrap";
import { RoleApi } from "@/api/role";

const roles = ref([]);
const userRoles = ref([]);
const isFetchingUserRole = ref(false);
const showModal = ref(false);
const selectedRoleId = ref(null);
const selectedUserId = ref(null);
const isAddingRole = ref(false);
const isRemoveRole = ref(false);
const addRoleModal: any = ref(null);

const headers = ref([
  {
    text: "Nama User",
    value: "name",
  },
  {
    text: "Email User",
    value: "email",
  },
]);

const handleRoleButtonClick = async (userId) => {
  selectedUserId.value = userId;

  addRoleModal.value.show();
  await fetchUserRoles(userId);
};

const addUserRole = async () => {
  isAddingRole.value = true;
  await api.user.addRole(selectedUserId, selectedRoleId);
  isAddingRole.value = false;
  fetchUserRoles(selectedUserId);
};

const removeUserRole = async (role_id) => {
  isRemoveRole.value = true;
  await api.user.deleteRole(selectedUserId, role_id);
  isRemoveRole.value = false;
  fetchUserRoles(selectedUserId);
};

const fetchUserRoles = async (userId) => {
  isFetchingUserRole.value = true;
  const response = api.user.getRole(userId);
  userRoles.value = response.data.result;
  isFetchingUserRole.value = false;
};

const fetchRoles = async () => {
  const response = await RoleApi.datatable();
  roles.value = response.result.data.map((role) => {
    return {
      value: role.id,
      label: role.name,
    };
  });
};

onMounted(() => {
  fetchRoles();
  addRoleModal.value = new bootstrap.Modal(
    document.getElementById("addRoleModal"),
    {
      keyboard: false,
    }
  );
});
</script>
