<script setup lang="ts">

import UserDashboardHero from "@/views/dashboards/userDashboard/UserDashboardHero.vue";
import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
import {useRouter} from "vue-router";
import {ref, defineProps, Component} from "vue";
import {getUserOrder} from "@/components/shop/Orders.vue";
import {getDepartmentName, getDepartments} from "@/components/pagination/departmentTabs.vue";
import '@creativebulma/bulma-divider/dist/bulma-divider.min.css';
import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";

const props = defineProps({
  visibleComponents: {
    type: Object as () => {
      warnings: boolean;
      transaction_details: boolean;
      customer_details: boolean;
      vehicle_details: boolean;
      order_items: boolean;
      payment_status: boolean;
    },
    default: () => ({
      warnings: true,
      transaction_details: true,
      customer_details: true,
      vehicle_details: true,
      order_items: true,
      payment_status: false,
    })
  },
  orderObject: {
    type: Object as () => {
      orderId: number | null;
      paid: boolean | null;
    },
    default: () => ({
      orderId: null,
      paid: false,
      tax_percentage: 0,
    })
  }
});
const router = useRouter();

const orderId = ref(router.currentRoute.value.params.orderId);
const orderItems = ref([]);
const order = ref([]);
const economicModuleOrders = ref([]);
const isLoading = ref(true);
const customer = ref([]);

const getOrderId = () => {
  // If the orderObject is set, use that
  if (props.orderObject && props.orderObject.orderId) {
    return props.orderObject.orderId;
  }
  // Otherwise, use the orderId from the URL
  return orderId.value;
};

// Load the departments
getDepartments();

// Load the order, when the page is loaded
getUserOrder(getOrderId(), true).then((response) => {
  orderItems.value = response.data.includes.orderItems;
  order.value = response.data.data;
  economicModuleOrders.value = response.data.includes.economicModuleOrders;
  customer.value = response.data.includes.customer;
  isLoading.value = false;
});
</script>

<template>
  <UserDashboardPageWrapper :title="'Transaktion ' + getOrderId()" subtitle="Se detaljer om transaktionen">
    <template v-if="props.visibleComponents.warnings">
      <div class="message is-warning mt-2" v-if="!isLoading && !economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
        <div class="message-body">
          <p class="is-size-6">Denne transaktion er under behandling, og er ikke klar til at blive faktureret.</p>
        </div>
      </div>
      <div class="message is-dark mt-2" v-if="!isLoading && economicModuleOrders.invoice_draft_id && !economicModuleOrders.invoice_id">
        <div class="message-body">
          <p class="is-size-6">Denne transaktion er blevet gemt, og er klar til at blive faktureret.</p>
        </div>
      </div>
      <div class="notification is-success mt-2" v-if="!isLoading && economicModuleOrders.invoice_id">
        <p class="is-size-6">Denne transaktion er blevet faktureret.</p>
      </div>
    </template>
    <div class="box">
      <div class="columns is-mobile is-multiline">
        <!-- Order information -->
        <div class="column" :class="(props.visibleComponents.transaction_details && props.visibleComponents.customer_details) ? 'is-half' : 'is-full'" v-if="props.visibleComponents.transaction_details">
          <div class="content">
            <h3 class="title is-4">Transaktions information</h3>
            <p><strong>Dato:</strong> {{ order.created_at }}</p>
            <p><strong>Afdeling:</strong> {{getDepartmentName(order.department_id)}}</p>
            <p v-if="order.notes"><strong>Noter:</strong> {{ order.notes }}</p>
            <p><strong>Reference:</strong> {{ order.reference }}</p>
            <p><strong>Ordre total:</strong> {{ orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) }} DKK</p>
          </div>
        </div>
        <!-- Customer information -->
        <div class="column" :class="(props.visibleComponents.transaction_details && props.visibleComponents.customer_details) ? 'is-half' : 'is-full'" v-if="props.visibleComponents.customer_details">
          <div class="content" :class="(props.visibleComponents.transaction_details ? 'has-text-right' : 'has-text-left')">
            <h3 class="title is-4">Kunde information</h3>
            <p><strong>CVR:</strong> {{ customer.economic_customer.corporateIdentificationNumber ? customer.economic_customer.corporateIdentificationNumber : 'Ingen CVR' }}</p>
            <p><strong>Kunde ID:</strong> {{ customer.customer_number }}</p>
            <p><strong>Navn:</strong> {{ customer.customer_name }}</p>
            <p><strong>Adresse:</strong> {{ customer.economic_customer.address ? customer.economic_customer.address : 'Ingen adresse' }}, {{ customer.economic_customer.zip ? customer.economic_customer.zip : '' }}  {{ customer.economic_customer.city ? customer.economic_customer.city : '' }}</p>
          </div>
        </div>
        <!-- Vehicle information -->
        <div class="column is-12 pt-0" v-if="props.visibleComponents.vehicle_details">
          <div class="divider">Køretøjer</div>
          <div class="columns has-text-centered">
            <div class="column" v-if="order.reg_1">
              <p><strong>Reg. 1:</strong> {{ order.reg_1 }}</p>
            </div>
            <div class="column" v-if="order.reg_2">
              <p><strong>Reg. 2:</strong> {{ order.reg_2 }}</p>
            </div>
            <div class="column" v-if="order.reg_3">
              <p><strong>Reg. 3:</strong> {{ order.reg_3 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  <OrderItemsTable :orderItems="orderItems" :isLoading="isLoading" v-if="props.visibleComponents.order_items" v-bind:paid="props.orderObject.paid" v-bind:tax-percentage="order.tax_percentage" v-bind:show-payment-status="props.visibleComponents.payment_status" />
  </UserDashboardPageWrapper>
</template>

<style scoped>

</style>