<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 { order_items, order_id, loadOrderItems, isCustomerSelected, doesOrderContainMaterial, customer_id, department_id } from "@/components/shop/POSDepartmentProcess.vue";
import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
import PreviousStep from "@/components/forms/department/pos/buttons/PreviousStep.vue";
import PosOrderLicensePlates from "@/components/displays/department/pos/order/PosOrderLicensePlates.vue";
import PayWithStripeButton from "@/components/displays/department/pos/displays/PayWithStripeButton.vue";

</script>

<template>
  <div>
    <div class="columns">
      <!-- Choose add-ons -->
      <div class="column is-8 pl-0 pr-3">
        <WhiteBox>
          <template #default>
            <div>
              <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" :is-large="true">
                <template #bottom>
                  <!-- Back button -->
                  <ButtonsBox>
                    <PreviousStep :is-text="true" label="Tilføj flere varer" />
                  </ButtonsBox>
                </template>
              </PosOrderItemsCurrent>
            </div>
          </template>
        </WhiteBox>
        <NextStepError class="is-fullwidth" />
        <ButtonsBox>
            <Cancel
                style="width: 25%;"
                tabindex="2"
                class="is-fullwidth"
                label="Annuller"
            />
            <template v-if="customer_id !== 999">
              <NextStep
                  style="width: 25%;"
                  class="is-fullwidth"
                  label="Gennemfør"
              />
            </template>
            <!-- Stripe customer -->
            <template v-else>
              <PayWithStripeButton
                  style="width: 25%;"
                  class="is-fullwidth"
                  label="Betal med Stripe"
                  :departmentId="department_id"
                  :order_id="order_id"
                  v-bind:order_items="order_items"
              />
            </template>
        </ButtonsBox>
      </div>
      <!-- Last provided orders -->
      <div class="column is-4 pl-3 pr-0">
        <WhiteBox>
          <template #default v-if="isCustomerSelected()">
            <PosSelectedCustomer />
          </template>
        </WhiteBox>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>