<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 NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
import { clearCache } from "@/components/shop/POSDepartmentProcess.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
import { isCustomerSelected, department_id, getDepartment } from "@/components/shop/POSDepartmentProcess.vue";
import {onMounted, ref} from "vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import {POS_STEP_1_VERSION} from "@/main.js";
import SelectVehicleFormPOS from "@/components/forms/department/pos/SelectVehicleFormPOS.vue";
import PosLastScannedLicensePlatesV2 from "@/components/displays/department/pos/PosLastScannedLicensePlatesV2.vue";
import {watch} from "vue";
// Clear cache
clearCache();


// Define the tabs
const right_tabs = ref([
  {
    name: "Nummerplader",
    slot: "license_plates",
    icon: "fas fa-car",
    hidden: false,
  },
  {
    name: "Kunde",
    slot: "customer",
    icon: "fas fa-user",
    hidden: () => !isCustomerSelected(),  // Hide the tab if no customer is selected
  }
]);

const forceActiveTab = ref('license_plates'); // Force the active tab to be license plates

const setTab = (tab) => {
  console.log("Tab changed to: " + tab);
  forceActiveTab.value = tab;
};

// Watch for changes in the isCustomerSelected variable
watch(() => isCustomerSelected(), (newValue) => {
  // If the customer is selected, set the active tab to customer
  if (newValue) {
    forceActiveTab.value = 'customer';
  } else {
    forceActiveTab.value = 'license_plates';
  }
});

// attempt to focus on the reg_1 input field
const focusOnReg1 = () => {
  setTimeout(() => {
    const reg1Input = document.getElementById("reg_1");
    if (reg1Input) {
      reg1Input.focus();
    }
  }, 100);
};

focusOnReg1();
const getDepartmentVersion = () => {
  let result = 1;
  if (parseInt(getDepartment()) === 6) {
    result = 2;
  } else {
    result = POS_STEP_1_VERSION;
  }
  //console.log("Department version: " + result, "Department ID: " + department_id.value);
  return result;
}

const department_version = ref(getDepartmentVersion());

// Select the "pos_select_customer_input" input field, and focus on it on page load
onMounted(() => {
  if (getDepartmentVersion() === 1) {
    document.getElementById("pos_select_customer_input").focus();
  }
});

</script>

<template>
  <div>
    <!--
    {{department_version}}
    {{department_id}}
    {{getDepartment()}}
    -->

    <!-- Version 1 -->
    <template v-if="department_version.valueOf() === 1">
      <div class="columns">
        <!-- Choose customer -->
        <div class="column is-8-desktop pl-0 pr-3">
          <WhiteBox>
            <template #default>
              <SelectCustomerFormPOS/>
            </template>
          </WhiteBox>
          <ButtonsBox>
            <div class="buttons">
              <Cancel
                  style="width: 25%;"
                  tabindex="2"
                  class="is-fullwidth"
              />
            </div>
          </ButtonsBox>
        </div>
        <!-- Last seen License Plates in department -->
        <div class="column is-4-desktop pl-3 pr-0">
          <WhiteBox>
            <template #default>
              <ElementTabsBox
                  :tabs="right_tabs"
                  default-active-tab="license_plates"
                  class="is-boxed"
                  :allowCompactWhenOneTab="true"
              >
                <template #customer>
                  <PosSelectedCustomer />
                </template>
                <template #license_plates>
                  <PosLastScannedLicensePlates class="my-3"/>
                </template>
              </ElementTabsBox>
            </template>
          </WhiteBox>
          <NextStepError class="is-fullwidth" />
          <ButtonsBox>
            <NextStep class="is-fullwidth" tabindex="6"/>
          </ButtonsBox>
        </div>
      </div>
    </template>
    <!-- Version 2 -->
    <template v-else-if="department_version.valueOf() === 2">
      <div class="columns">
        <!-- Choose vehicle -->
        <div class="column is-8-desktop pl-0 pr-3">
          <WhiteBox>
            <template #default>
              <SelectVehicleFormPOS/>
            </template>
          </WhiteBox>
          <ButtonsBox>
            <Cancel
                style="width: 25%;"
                tabindex="2"
                class="is-fullwidth"
            />
          </ButtonsBox>
        </div>
        <!-- Last seen License Plates in department -->
        <div class="column is-4-desktop pl-3 pr-0">
          <WhiteBox>
            <template #default>
              <ElementTabsBox
                  :tabs="right_tabs"
                  default-active-tab="license_plates"
                  class="is-boxed"
                  :allowCompactWhenOneTab="true"
                  @update:activeTab="setTab"
                  v-bind:force-active-tab="forceActiveTab"
              >
                <template #customer>
                  <PosSelectedCustomer />
                </template>
                <template #license_plates>
                  <PosLastScannedLicensePlatesV2 class="my-3"/>
                </template>
              </ElementTabsBox>
            </template>
          </WhiteBox>
          <NextStepError class="is-fullwidth" :clear-automatically="true" :clear-delay="8000"/>
          <ButtonsBox>
            <NextStep class="is-fullwidth" tabindex="6"/>
          </ButtonsBox>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>

</style>