<script setup>
import {ref, defineProps} from 'vue';
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import CollectedOrderInvoiceManageEconomic
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/manage/collectedOrderInvoiceManageEconomic.vue";
import CollectedOrderInvoiceManageStripe
  from "@/views/dashboards/superUserDashboard/collectedOrderInvoice/displays/manage/collectedOrderInvoiceManageStripe.vue";

const props = defineProps({
  invoiceId: {
    type: Number,
    required: true,
  },
  collectedOrderInvoice: {
    type: Object,
    required: false,
  },
});

const processors = {
  1: {
    name: "E-conomic",
    description: "Fakturering med E-conomic",
  },
  2: {
    name: "Stripe",
    description: "Fakturering med Stripe",
  },
  3: {
    name: "Other, without tracking.",
    description: "Fakturering på anden måde",
  },
}
const columnClasses = ref({
  'column': props.collectedOrderInvoice.processor === 0,
  'is-6': props.collectedOrderInvoice.processor === 0,
});
</script>

<template>
  <div
      :class="{
        'columns': props.collectedOrderInvoice.processor === 0
      }"
    >
    <!-- E-conomic -->
    <CollectedOrderInvoiceManageEconomic
      :invoiceId="invoiceId"
      :collectedOrderInvoice="collectedOrderInvoice"
      :class="columnClasses"
      v-if="(props.collectedOrderInvoice.processor === 1 || props.collectedOrderInvoice.processor === 0) && props.collectedOrderInvoice.stripe === null"
    />
    <!-- Stripe -->
    <CollectedOrderInvoiceManageStripe
      :invoiceId="invoiceId"
      :collectedOrderInvoice="collectedOrderInvoice"
      :class="columnClasses"
      v-else-if="(props.collectedOrderInvoice.processor === 2 || props.collectedOrderInvoice.processor === 0) || props.collectedOrderInvoice.stripe !== null"
    />
  </div>
</template>

<style scoped>

</style>