<template>
  <div>
    <DefaultHeaderPage title="Produtos" :show-filter-icon="false" />

    <div class="q-px-sm">
      <CustomTabComponent
        v-model:active-tab="currentTab"
        :tabs="tabs"
        class="q-mb-sm"
      />
      <div class="row items-center justify-between q-my-md" style="gap: 12px">
        <q-input
          v-model="search"
          dense
          outlined
          bg-color="white"
          placeholder="Buscar produto..."
          style="width: 480px"
        >
          <template #prepend>
            <q-icon name="mdi-magnify" />
          </template>
        </q-input>
        <div class="row items-center" style="gap: 8px">
          <q-pagination
            v-model="currentPage"
            :max="totalPages"
            :max-pages="5"
            boundary-numbers
            direction-links
            color="primary"
            active-color="primary"
          />
          <q-btn
            v-if="currentTab === 'products' && canAdd"
            color="primary-2"
            style="height: 40px; width: 40px; min-width: 40px"
            @click="handleAdd"
          >
            <q-icon name="mdi-plus" color="white" size="20px" />
          </q-btn>

          <q-btn
            v-if="currentTab === 'orders' && canAdd"
            label="Importar"
            color="primary-2"
            icon="mdi-file-import-outline"
            style="height: 40px"
            @click="handleImport"
          />
        </div>
      </div>

      <div v-show="currentTab === 'products'">
        <ProductsTab ref="productsTabRef" />
      </div>

      <div v-show="currentTab === 'stock'">
        <StockTab ref="stockTabRef" />
      </div>

      <div v-show="currentTab === 'orders'">
        <OrdersTab ref="ordersTabRef" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, shallowRef, watch } from "vue";
import { useQuasar } from "quasar";
import { permissionStore } from "src/stores/permission";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";
import AddEditProductDialog from "./components/AddEditProductDialog.vue";
import ImportOrderDialog from "./components/ImportOrderDialog.vue";

const ProductsTab = defineAsyncComponent(() => import("./tabs/ProductsTab.vue"));
const StockTab = defineAsyncComponent(() => import("./tabs/StockTab.vue"));
const OrdersTab = defineAsyncComponent(() => import("./tabs/OrdersTab.vue"));

const currentTab = ref("products");
const permissions = permissionStore();
const canAdd = permissions.getAccess("franchisor_products", "add");
const search = ref("");
const currentPage = ref(1);
const totalPages = ref(1);
const productsTabRef = shallowRef(null);
const stockTabRef = shallowRef(null);
const ordersTabRef = shallowRef(null);

watch(currentTab, (tab) => {
  if (tab === "products") productsTabRef.value?.fetchProducts();
  if (tab === "stock")    stockTabRef.value?.refresh();
  if (tab === "orders")   ordersTabRef.value?.refresh();
});

const tabs = [
  { name: "products", label: "Produtos" },
  { name: "stock", label: "Estoque" },
  { name: "orders", label: "Pedidos" },
];

const $q = useQuasar();

const handleAdd = () => {
  $q.dialog({ component: AddEditProductDialog }).onOk(() => {
    productsTabRef.value?.fetchProducts();
  });
};

const handleImport = () => {
  $q.dialog({ component: ImportOrderDialog }).onOk(() => {
    ordersTabRef.value?.refresh();
    productsTabRef.value?.fetchProducts();
    stockTabRef.value?.refresh();
  });
};
</script>
