<script setup>

import SelectCustomerFormPOS from "@/components/forms/department/pos/SelectCustomerFormPOS.vue";
import PosLastScannedLicensePlates from "@/components/displays/department/pos/PosLastScannedLicensePlates.vue";
import NextStep from "@/components/forms/department/pos/buttons/NextStep.vue";
import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
import NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
import { order_items, order_id, loadOrderItems, setProductsCategory, notes, user_discounts, getUserDiscounts, customer_id } from "@/components/shop/POSDepartmentProcess.vue";
import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import { ref, watch } from "vue";
// Set the category to products
setProductsCategory(null);

// Define the tabs
const right_tabs = [
  {
    name: "Kurv",
    slot: "basket",
    icon: "fas fa-shopping-basket",
    hidden: false,
  },
  {
    name: "Kunde",
    slot: "customer",
    icon: "fas fa-user",
    hidden: false,
  }
];

</script>

<template>
  <div>
    <div class="columns">
      <!-- Choose products -->
      <div class="column is-8-desktop pl-0 pr-3">
        <SelectProductsFormPOS class="mt-3" category="null" />
        <PosNotes :notes="notes" class="mt-3" :isAddFormVisible="false" :isOldNotesVisible="true"/>
      </div>
      <!-- Current order items -->
      <div class="column is-4-desktop keep-in-viewport pl-3 pr-0">
        <WhiteBox style="min-height: 40%;">
          <ElementTabsBox
              v-bind:tabs="right_tabs"
              default-active-tab="basket"
              class="is-boxed"
              :allowCompactWhenOneTab="true"
          >
            <template #customer>
              <PosSelectedCustomer />
            </template>
            <template #basket>
              <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" />
            </template>
          </ElementTabsBox>
        </WhiteBox>
        <!--<PosSelectedCustomer class="mt-3"/> -->
        <NextStepError class="is-fullwidth" />
        <div class="buttons">
          <NextStep
              class="is-fullwidth"
              label="Næste"
          />
          <Cancel class="is-fullwidth" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>