<script setup>
import { ref } from 'vue';
import { getCurrentStep, setDepartment, getOrderId, setStep, setOrderId, searchAndSelectCustomer, loadOrderItems } from "@/components/shop/POSDepartmentProcess.vue";
import PosDepartmentStep1 from "@/components/displays/department/pos/steps/PosDepartmentStep1.vue";
import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDepartmentStep2.vue";
import PosDepartmentStep3 from "@/components/displays/department/pos/steps/PosDepartmentStep3.vue";
import PosDepartmentStep4 from "@/components/displays/department/pos/steps/PosDepartmentStep4.vue";

setDepartment();

// Debug:
// If the &id= query parameter is set, then set the order_id to the value of the query parameter
// If the &step= query parameter is set, then set the current_step to the value of the query parameter
// If the &customer_id= query parameter is set, then set the customer_id to the value of the query parameter
if (window.location.search.includes("id=")) {
  const urlParams = new URLSearchParams(window.location.search);
  const orderId = urlParams.get("id");
  if (orderId !== null) {
    setOrderId(parseInt(orderId));
  }
  loadOrderItems();
}

if (window.location.search.includes("step=")) {
  const urlParams = new URLSearchParams(window.location.search);
  const step = urlParams.get("step");
  if (step !== null) {
    setStep(parseInt(step));
  }
}

if (window.location.search.includes("customer_id=")) {
  const urlParams = new URLSearchParams(window.location.search);
  const customerId = urlParams.get("customer_id");
  if (customerId !== null) {
    searchAndSelectCustomer(parseInt(customerId));
  }
}

/** Define the createOrder function */
</script>

<template>
  <div>
    <div class="mt-5">
      <PosDepartmentStep1 v-if="getCurrentStep() === 1" />
      <PosDepartmentStep2 v-if="getCurrentStep() === 2 && (getOrderId() !== null)" />
      <PosDepartmentStep3 v-if="getCurrentStep() === 3 && (getOrderId() !== null)" />
      <PosDepartmentStep4 v-if="getCurrentStep() === 4 && (getOrderId() !== null)" />
    </div>
  </div>
</template>

<style scoped>

</style>