<template>
  <NavBar/>

  <div v-if="isLoading">
    <LoadingComponent/>
  </div>
  <div v-else>
    <div v-if="isForm">
      <MainForm
        v-if="order == undefined || order.MZN_Bufor==1"
      />
      <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
    </div>
    <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
    />
  </div>
  <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
</template>

<script setup lang="ts">
import '@/assets/base.css'
import { useContractorsStore } from '@/stores/contractors.store'
import { storeToRefs } from 'pinia'
import { useCategoriesStore } from '@/stores/categories.store'
import { useOrdersStore } from '@/stores/orders.store'
import { useSiteControlStore } from '@/stores/siteControl.store'

const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const contractors = storeToRefs(contractorsStore).contractors;
const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories;

const { uuid, order } = storeToRefs(ordersStore);

const { isForm, isOrders, showConfirmationModal, isLoading } = storeToRefs(siteControlStore);

async function  fetchData() {
  await categoriesStore.fetchCategories();
  await contractorsStore.fetchContractors();
  isLoading.value = false;
}

function closeConfirmationModal() {
  showConfirmationModal.value = false;
  if (uuid.value != undefined) {
    isLoading.value = true;
    ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
  }
}

siteControlStore.checkTheme();
fetchData();
</script>

<style>
@media screen and (min-width: 500px) {
  .box {
    --bulma-box-padding: 1.5rem;
  }
}
@media screen and (max-width: 500px) {
  .box {
    --bulma-box-padding: 0.75rem;
  }
}

:root {
  min-height: 100vh;
}

body {
  min-height: 100vh;
}
</style>
