import CardMembershipIcon from "@mui/icons-material/CardMembership";
import ReceiptLongOutlinedIcon from "@mui/icons-material/ReceiptLongOutlined";
import SubscriptionsOutlinedIcon from "@mui/icons-material/SubscriptionsOutlined";

import { OpenAPI } from "openapi-types";

import { RouterExtension } from "../../router/Router";
import { ContribComponentMap, NavigationOverrides, PageComponent } from "../../types";
const routes: Record<
  string,
  Record<
    string,
    {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      page: () => PageComponent<any> | Promise<PageComponent<any>>;
      request?: OpenAPI.Request;
      defaultRequest?: OpenAPI.Request;
      offline?: boolean;
    }
  >
> = {
  member: {
    create: {
      page: async () => (await import("./pages/member/create")).default,
      offline: true,
    },
    detail: {
      page: async () => (await import("./pages/member/detail")).default,
    },
    list: { page: async () => (await import("./pages/member/list")).default },
  },
};

export const router: RouterExtension = {
  app: "member",
  pages: (route) => {
    const { page, ...hit } = routes[route.view]?.[route.action] ?? {};

    if (page != null) {
      return {
        page: page(),
        ...hit,
      };
    }

    return undefined;
  },
};

export const navigation: NavigationOverrides = {
  "member.member:list": {
    icon: CardMembershipIcon,
    title: "Members",
    permission: "member.view_member",
  },
} as const;

export const contrib: Record<string, ContribComponentMap> = {
  subscriptionsTab: {
    "member:member:detail:subscriptions": {
      title: "Subscriptions",
      icon: SubscriptionsOutlinedIcon,
      component: async () => (await import("./contrib/SubscriptionsCard")).default,
      variant: "tab",
      permission: "subscription.view_subscription",
    },
  },
  subscriptionsInline: {
    "member:member:detail:subscriptions": {
      component: async () => (await import("./contrib/SubscriptionsCard")).default,
      variant: "inline",
      permission: "subscription.view_subscription",
    },
  },
  purchases: {
    "member:member:detail:purchases": {
      title: "Purchases",
      icon: ReceiptLongOutlinedIcon,
      component: async () => (await import("./contrib/PurchasesCard")).default,
      variant: "tab",
      permission: "pos.view_purchase",
    },
  },
  paymentMethods: {
    "member:member:detail:paymenttokens": {
      component: async () => (await import("./contrib/PaymentMethodsCard")).default,
      variant: "inline",
      permission: "pos.view_paymenttoken",
    },
  },
} as const;