import { defineStore, storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useOrdersStore } from '@/stores/orders.store'
import type { Order } from '@/main'
import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'

export const useSiteControlStore = defineStore('siteControl', () => {
  const isForm = ref<boolean>(true);
  const isOrders = ref<boolean>(false);
  const showConfirmationModal = ref<boolean>(false);
  const isDarkTheme = ref<boolean>(false);
  const isLoading = ref<boolean>(true);


  function switchToFrom() {
    if(!isForm.value) {
      isForm.value = true;
      isOrders.value = false;
    }
  }

  async function switchToOrders() {
    if(!isOrders.value) {
      const orderStore = useOrdersStore();
      const { orders } = storeToRefs(orderStore);
      isLoading.value = true;
      isForm.value = false;
      isOrders.value = true;
      orders.value = new Array<Order>();
      orders.value.push(... await orderStore.fetchOrdersInBuffer());
      orders.value.push(... await orderStore.fetchOrdersOutOfBuffer());
      isLoading.value = false;
    }
  }

  function checkTheme() {
    isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
  }

  async function viewOrder(uuid : string) {
    const orderStore = useOrdersStore();
    const contractorsStore = useContractorsStore();
    const categoriesStore = useCategoriesStore();
    isForm.value = true;
    isOrders.value = false;
    isLoading.value = true;
    window.scrollTo(0, 0);
    const { contractor, contractors } = storeToRefs(contractorsStore);
    const { categories } = storeToRefs(categoriesStore);
    await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
    isLoading.value=false;
  }

  return {isForm, isOrders, isLoading, showConfirmationModal, isDarkTheme, switchToFrom, switchToOrders, checkTheme, viewOrder};
})