<template>
  <div class="row justify-content-center">
    <div class="col-xl-10">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Partnership Users</h4>
          <p class="card-title-desc">
            Edit, deactivate or remote access into a partnership user account
          </p>
          <div class="table-responsive">
            <table class="table table-bordered border-primary mb-0">
              <thead class="table-light">
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email</th>
                  <th>Phone Number</th>
                  <th>Role</th>
                  <th>Sign-in Count</th>
                  <th>Sign-in Date</th>
                  <th>Sign-in IP</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(user, index) in users" :key="user.id">
                  <th scope="row">{{ index + 1 }}</th>
                  <td>{{ user.firstName }}</td>
                  <td>{{ user.lastName }}</td>
                  <td>{{ user.email }}</td>
                  <td>{{ user.phoneNumber }}</td>
                  <td>{{ user.roleId }}</td>
                  <td>{{ user.signInCount }}</td>
                  <td>{{ user.signInDate }}</td>
                  <td>{{ user.signInIp }}</td>
                  <td>
                    <button
                      type="button"
                      class="btn btn-light btn-sm"
                      @click="onUserDeactivate(user.sid)"
                    >
                      <i
                        class="
                          bx bx-loader bx-spin
                          font-size-16
                          align-middle
                          me-2
                        "
                        v-if="
                          deactivatePartnerUserLoading &&
                          selectedUserId === user.sid
                        "
                      ></i>
                      Deactivate
                    </button>
                    <button
                      type="button"
                      class="btn btn-light btn-sm"
                      @click="onUserRemoteAccess(user.sid)"
                    >
                      <i
                        class="
                          bx bx-loader bx-spin
                          font-size-16
                          align-middle
                          me-2
                        "
                        v-if="
                          remoteAccessPartnerUserLoading &&
                          selectedUserId === user.sid
                        "
                      ></i>
                      Remote Access
                    </button>
                    <button
                      type="button"
                      class="btn btn-light btn-sm"
                      @click="onResendUserInvite(user.sid)"
                      v-if="user.created_on === user.updated_on"
                    >
                      <i
                        class="
                          bx bx-loader bx-spin
                          font-size-16
                          align-middle
                          me-2
                        "
                        v-if="
                          resendInvitationLoading && selectedUserId === user.sid
                        "
                      ></i>
                      Resend Invite
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedUserId: null,
    };
  },
  props: {
    users: {
      type: Array,
      required: false,
    },
    deactivatePartnerUserLoading: {
      type: Boolean,
      required: true,
    },
    remoteAccessPartnerUserLoading: {
      type: Boolean,
      required: true,
    },
    resendInvitationLoading: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    onUserDeactivate(userId) {
      this.$emit('deactivateUser', userId);
      this.selectedUserId = userId;
    },
    onUserRemoteAccess(userId) {
      this.$emit('remoteAccess', userId);
      this.selectedUserId = userId;
    },
    onResendUserInvite(userId) {
      this.$emit('resendInvitation', userId);
      this.selectedUserId = userId;
    },
  },
};
</script>