/**
 * Centralized routes config
 */

import * as React from "react";
import { RouteProps as ReactRouteProps } from "react-router-dom";

import { isDev, isHMR } from "@app/utils/flags";

// dynamically import the route module
export type importModuleFn = () => Promise<React.ComponentClass>;

// Navigation props
export interface NavConfig {
  readonly label: string;
  readonly icon?: React.ComponentClass;
  readonly priority?: number; // occurrence order in the navigation (defaults to the position in the routes array)
}

// meta tags for SEO (irrelevant if app sits behind auth, like in this example)
export interface MetaConfig {
  readonly title: string; // <title>, <meta "twitter:title" & "og:title" & "itemprop.name">
  readonly description: string; // <meta "description" & "twitter:description" & "og:description" & "itemprop.description">
  readonly keywords?: string; // <meta "keywords">
  readonly imageURL: string; // <meta "twitter:image" & "og:image" & "itemprop.image" >
}

// the base props for a route
export interface RouteProps extends ReactRouteProps {
  readonly path: string;
  readonly nav?: NavConfig;
  readonly meta?: MetaConfig;
  readonly guarded: boolean;
  readonly importModule: importModuleFn;
}

// an array of declared routes
export type Routes = ReadonlyArray<RouteProps>;

// the default protected/unprotected routes to redirect to if the user is logged
// in or not logged in respectively.
export const DFLT_PROTECTED_ROUTE = "/";
export const DFLT_UNPROTECTED_ROUTE = "/login";

if (isDev && isHMR) {
  // pre-import routes during development so they can be hot-reloaded
  import("@app/routes/Dashboard");
  import("@app/routes/Account");
  import("@app/routes/Settings");
  import("@app/routes/Login");
  import("@app/routes/Register");
  import("@app/routes/ResendCfmCode");
  import("@app/routes/ResetPassword");
  import("@app/routes/NotFound");
}

const routes: Routes = [
  {
    path: DFLT_PROTECTED_ROUTE, // default protected route is the dashboard page
    exact: true,
    guarded: true,
    nav: { label: "Dashboard", icon: undefined },
    importModule: async () => (await import("@app/routes/Dashboard")).default
  },
  {
    path: "/account",
    guarded: true,
    nav: { label: "Profile", icon: undefined },
    importModule: async () => (await import("@app/routes/Account")).default
  },
  {
    path: "/settings",
    guarded: true,
    nav: { label: "Settings", icon: undefined },
    importModule: async () => (await import("@app/routes/Settings")).default
  },
  {
    path: DFLT_UNPROTECTED_ROUTE, // default unprotected route is the login page
    guarded: false,
    nav: { label: "Login" },
    importModule: async () => (await import("@app/routes/Login")).default
  },
  {
    path: "/register",
    guarded: false,
    nav: { label: "Register" },
    importModule: async () => (await import("@app/routes/Registration")).default
  },
  {
    path: "/resend-confirmation-code",
    guarded: false,
    nav: { label: "Resend Confirmation Code" },
    importModule: async () => (await import("@app/routes/ResendCfmCode")).default
  },
  {
    path: "/reset-password",
    guarded: false,
    nav: { label: "Forgot something?" },
    importModule: async () => (await import("@app/routes/ResetPassword")).default
  },
  {
    path: "/404",
    guarded: false,
    importModule: async () => (await import("@app/routes/NotFound")).default
  }
];

export default routes;