<script setup>
const props = defineProps({
  orderItems: {
    type: Array,
    required: true,
  },
  isLoading: {
    type: Boolean,
    default: false,
  },
  taxPercentage: {
    type: Number,
    default: 0,
  },
  paid: {
    type: Boolean,
    default: false,
  },
  showPaymentStatus: {
    type: Boolean,
    default: false,
  },
});

const calculateTax = (price) => {
  if (!price || !props.taxPercentage) {
    return 0;
  }
  return price * (props.taxPercentage / 100);
};
const calculateTotalPrice = (price, quantity) => {
  if (!price || !quantity) {
    return 0;
  }
  const totalPrice = price * quantity;
  const tax = calculateTax(totalPrice, props.taxPercentage);
  return totalPrice + tax;
};
</script>

<template>
  <table class="table is-fullwidth is-hoverable is-striped is-bordered">
    <thead>
    <tr>
      <th>Item</th>
      <th>Notes</th>
      <th>Reference</th>
      <th>Quantity</th>
      <th style="text-align: right;">Price</th>
    </tr>
    </thead>
    <tbody>
    <tr v-if="props.isLoading" v-for="n in 5" :key="n">
      <!-- Skeleton-lines 5 rows -->
      <td v-for="n in 5" :key="n">
        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
      </td>
    </tr>
    <tr v-for="orderItem in props.orderItems" :key="orderItem.id" v-else>
      <td>{{ orderItem.product.name }}</td>
      <td>{{ orderItem.notes }}</td>
      <td>{{ orderItem.reference }}</td>
      <td>{{ orderItem.quantity }}</td>
      <td style="text-align: right;" v-if="orderItem.price !== orderItem.product.price">
        <span style="text-decoration: line-through;" class="has-text-dark">{{ orderItem.product.price * orderItem.quantity}}</span> <span>{{ orderItem.price * orderItem.quantity }} DKK</span>
      </td>
      <td style="text-align: right;" v-else>{{ orderItem.price * orderItem.quantity }} DKK</td>
    </tr>
    </tbody>
    <tfoot>
    <!-- Tax -->
    <tr v-if="props.taxPercentage > 0">
      <td colspan="4">Tax ({{ props.taxPercentage }}%)</td>
      <td style="text-align: right;" v-if="props.isLoading">
        <!-- Skeleton-lines 1 row -->
        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
      </td>
      <td style="text-align: right;" v-else>{{ calculateTax(props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0)) }} DKK</td>
    </tr>
    <tr v-if="props.taxPercentage > 0">
      <td colspan="4">Subtotal</td>
      <td style="text-align: right;" v-if="props.isLoading">
        <!-- Skeleton-lines 1 row -->
        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
      </td>
      <td style="text-align: right;" v-else>{{ props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) }} DKK</td>
    </tr>
    <tr>
      <td colspan="4">Total</td>
      <td style="text-align: right;" v-if="props.isLoading">
        <!-- Skeleton-lines 1 row -->
        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
      </td>
      <td style="text-align: right;" v-else>{{ props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0) + calculateTax(props.orderItems.reduce((acc, orderItem) => acc + orderItem.price * orderItem.quantity, 0)) }} DKK</td>
    </tr>
    <tr v-if="props.showPaymentStatus">
      <td colspan="4">Payment Status</td>
      <td style="text-align: right;" v-if="props.isLoading">
        <!-- Skeleton-lines 1 row -->
        <div class="skeleton-lines"><div style="width: 100%;"></div></div>
      </td>
      <td style="text-align: right;" :class="props.paid ? 'has-text-success' : 'has-text-danger'" v-else>{{ props.paid ? 'Paid' : 'Unpaid' }}</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>