<script setup>

import UserSubPageWrapper from "@/views/dashboards/superUserDashboard/user/UserSubPageWrapper.vue";
import PageTitle from "@/components/global/PageTitle.vue";
import { useRouter } from 'vue-router'
import {user, getUserData, userId, setUser, getUserCustomerNumber} from "@/views/dashboards/superUserDashboard/user/SuperUserSelectedUserObject.vue";
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import OrdersPagination from "@/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue";
import {watch} from "vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import PageLoader from "@/components/global/PageLoader.vue";
import Swal from "sweetalert2";
import VehiclesPagination from "@/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue";
// Get the user from the route
const router = useRouter()
import {defineProps, ref } from 'vue';
import MassDataInserterModal from "@/components/displays/modals/MassDataInserterModal.vue";

import { showMassDataInsertModal} from "@/components/forms/other/functions/showModal.vue";
import { init } from "@/components/forms/other/structures/VehicleDataStructure.vue";

// Set the user
setUser(router.currentRoute.value.params.userId);
const reload = () => {
  // Reload the user data
  getUserData();
};

const showMassDataInserterModal = () => {
  init();
  showMassDataInsertModal();
};
</script>

<template>
  <UserSubPageWrapper>
    <template #title>
      <PageTitle title="User" subtitle="Vaske abonnement" />
    </template>
    <div>
      <p>User ID: {{ userId }} (Customer number: {{ user.customer_number }})</p>
      <!-- User invoicing -->
      <!--
      <div class="card">
        <div class="card-header">
          <p class="card-header-title">
            <span class="icon"><i class="fas fa-file-invoice"></i></span>
            Fakturering
          </p>

          <p class="card-header-icon" @click="console.log('Settings clicked')">
            <span class="icon"><i class="fas fa-cog"></i></span>
          </p>
        </div>
        <div class="card-content">
          <p>Faktureringsmetode: <strong>{{ invoicePerOrder() ? 'Faktureres pr. ordre' : 'Faktureres samlet' }}</strong></p>
          <p v-if="user.orders_not_invoiced.value">Transaktioner der ikke er faktureret: <strong>{{ user.orders_not_invoiced.value.length }}</strong></p>
          <p v-else>Alle transaktioner er faktureret</p>
          <p v-if="user.keys.value.open_invoice_draft">Aktiv faktura kladde: <strong>{{ user.keys.value.open_invoice_draft }}</strong></p>
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <button class="card-footer-item button is-warning is-inverted mx-2"
                    v-if="!invoicePerOrder() && user.orders_not_invoiced.value && user.orders_not_invoiced.value.length > 0"
                    @click="invoiceOrders(user.orders_not_invoiced.value).then(reload())">Tilføj {{ user.orders_not_invoiced.value.length ?? 0 }} transaktioner til samlet faktura kladde
            </button>
            <button class="card-footer-item button is-dark mx-2"
                    v-else
                    disabled>Alle transaktioner er faktureret
            </button>
            <button class="card-footer-item button is-warning is-inverted mx-2"
                    v-if="invoicePerOrder() && user.orders_not_invoiced.value"
                    @click="invoiceOrders(user.orders_not_invoiced.value)">Opret individuelle faktura kladder: {{ user.orders_not_invoiced.value.length ?? 0 }} transaktioner
            </button>
            <button class="card-footer-item button is-success is-inverted mx-2"
                    v-if="!invoicePerOrder() && user.keys.value.open_invoice_draft"
                    @click="SessionUser.adminUser.invoices.draft.close(user.keys.value.open_invoice_draft).then(reload())">Luk faktura kladde ({{ user.keys.value.open_invoice_draft }})
            </button>
          </div>
        </div>
      </div> -->

      <!-- <p>User orders not invoiced: {{ user.orders_not_invoiced.value.length }}</p> -->
      <!-- "orders_not_invoiced": [ { "id": "429" }, { "id": "430" } ] } -->
      <!--<p v-if="user.orders_not_invoiced">
        <span v-for="order in user.orders_not_invoiced.value" :key="order.id">{{ order.id }}, </span>
      </p> -->
      <!-- <button @click="invoiceOrders(user.orders_not_invoiced.value)">Invoice orders</button> -->
      <button @click="showMassDataInserterModal">Mass data inserter</button>
      <!-- Orders -->
      <VehiclesPagination
          v-if="user.customer_number.value > 0"
          v-bind:customer_id="user.customer_number.value"
          v-bind:add_other_customer_id="user.customer_number.value"
      />
      <!-- While the user is not loaded, show a loading message -->
      <div v-else>
        <page-loader title="Loading user data" subtitle="Please wait while we load the user data" />
      </div>
    </div>

  </UserSubPageWrapper>
</template>

<style scoped>

</style>