import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import TableView from "@/views/Tables.vue";
import ItemView from "@/views/Items.vue";
import OrderView from "@/views/Orders.vue";
import BillView from "@/views/Bills.vue";
import CheckoutView from "@/views/Checkout.vue";
import TableDetail from "@/components/Tables/TableOverview.vue";
import { useStore } from "vuex";

const routes: Array<RouteRecordRaw> = [
  { path: "/tables", name: "Tables", component: TableView, meta: { needsAuth: true } },
  { path: "/tables/:id", name: "TableDetail", props: true, component: TableDetail, meta: { needsAuth: true } },
  { path: "/tables/:id/checkout", name: "Checkout", props: true, component: CheckoutView, meta: { needsAuth: true } },
  { path: "/orders", name: "Orders", component: OrderView, meta: { needsAuth: true } },
  { path: "/items/:id", name: "Items", props: true, component: ItemView, meta: { needsAuth: true } },
  { path: "/bills", name: "Bills", component: BillView, meta: { needsAuth: true } },
  { path: "/:pathMatch(.*)*", redirect: { name: "Tables" } },
];

const router = createRouter({
  routes,
  history: createWebHistory(process.env.BASE_URL),
});

router.beforeEach(async (to) => {
  const store = useStore();
  if (to.name === "Bills") {
    if (!store.getters.getGroups.includes("account")) return "/tables";
  }
  if (to.name === "Orders") {
    if (!store.getters.getGroups.includes("make")) return "/tables";
  }
  if (to.name === "Items") {
    if (!store.getters.getGroups.includes("edit")) return "/tables";
  }
  return true;
});

export default router;