<script setup>
import Swal from "sweetalert2";

defineProps(['objects']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";
import { loadList } from "@/components/pagination/paginatedList.vue";

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}

const parseCustomerName = (user) => {
  if (user.customer_name) {
    return user.customer_name;
  } else {
    return "-";
  }
}

import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";

const redirect = (path) => {
  window.location = path;
}

const showCustomerBarred = () => {
  Swal.fire({
    title: 'Denne kundekonto er lukket',
    html: 'Du kan derfor ikke foretage ændringer på denne kundekonto her. Vil du åbne kontoen igen, <a href="https://secure.e-conomic.com/sales/customers" target="_blank">skal du aktivere den i E-conomic</a>.',
    icon: 'warning',
    showCancelButton: true,
    showConfirmButton: false,
    cancelButtonText: 'OK',
    showLoaderOnConfirm: true,
  })
}

const parseBalance = (user) => {
  function addCurrencySign(balance) {
    return balance + ' ' + user.currency;
  }
  if (user.balance !== null) {
      return addCurrencySign(user.balance);
  } else {
    return "-";
  }
}


</script>

<template>
    <table class="table is-fullwidth">
      <thead>
      <tr>
        <th>ID</th>
        <th>Kundenummer</th>
        <th class="is-narrow">Kundenavn</th>
        <th class="is-narrow">Email</th>
        <th>Forfald</th>
        <th class="has-text-right">Handlinger</th>
      </tr>
      </thead>
      <tbody>
      <template v-for="user in objects" :key="user.id">
        <tr v-if="!user.barred">
          <td>{{ user.id ? user.id : '-' }}</td>
          <td>{{ user.customerNumber }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email ? user.email : '-' }}</td>
          <td
              :class="{ 'has-text-danger': user.balance < 0 }"
          >
            {{ parseBalance(user) }}</td>
          <!-- Actions, pulled right to align with the table -->
          <td>
            <div class="buttons is-float-right">
              <!-- Settings wheel -->
              <ActionSettingsWheelButton
                :user_id="user.id"
                >
                <template #actions>
                  <!-- Importer kunde fra E-conomic -->
                  <ActionSettingsWheelItem
                      label="Importer kunde fra E-conomic"
                      icon="fas fa-cloud-download-alt"
                      template="success"
                      :click-action="() => SessionUser.superUser.modules.economic.functions.customers.import(user.customerNumber).then(() => loadList())"
                      v-if="SessionUser.canAccessSuperUser() && user.id === null"
                  />
                </template>
              </ActionSettingsWheelButton>
            </div>
          </td>
        </tr>
        <!-- If the user is barred -->
        <tr v-else class="customer-row barred">
          <td>{{ user.id ? user.id : '-' }}</td>
          <td>{{ user.customerNumber }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email ? user.email : '-' }}</td>
          <td>
            {{ parseBalance(user) }}</td>
          <td>
            <div class="buttons is-float-right">
              <!-- Disabled customer actions -->
              <div class="dropdown is-right is-hoverable">
                <div class="dropdown-trigger">
                  <button class="button is-small is-danger is-inverted" aria-haspopup="true" aria-controls="dropdown-menu" @click="showCustomerBarred">
                    <span class="icon">
                      <i class="fas fa-exclamation-triangle"></i>
                    </span>
                  </button>
                </div>
                <div class="dropdown-menu" id="dropdown-menu" role="menu">
                  <div class="dropdown-content">
                    <a class="dropdown-item has-text-warning" @click="showCustomerBarred">
                      <span class="icon">
                        <i class="fas fa-exclamation-triangle"></i>
                      </span>
                      <span class="ml-1">Kundekonto er lukket i E-conomic</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>

</template>

<style scoped>
.customer-row {
  transition: background-color 0.5s;
}
.customer-row.barred td {
  color: #ff3860;
}

.auto-width {
  width: 1%;
  white-space: nowrap;
}
</style>