/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                    Pages                                   */
/* -------------------------------------------------------------------------- */
import Account from "pages/Account";
import Dashboard from "pages/Dashboard";
import NoMatch from "pages/NoMatch";
import Security from "pages/Security";
import Services from "pages/Services";
import AuthFailure from "pages/AuthFailure";
/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import Page from "components/Page";
import StandalonePage from "components/StandalonePage";
/* -------------------------------------------------------------------------- */
/*                                    Types                                   */
/* -------------------------------------------------------------------------- */
import { RoutePathDefinition } from "./types";
/* -------------------------------------------------------------------------- */
/*                                    Icons                                   */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
import { ReactComponent as SVGShieldIcon } from "assets/svg/shield.svg";
import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
/* -------------------------------------------------------------------------- */
/*                              Routes definition                             */
/* -------------------------------------------------------------------------- */

const routes: RoutePathDefinition[] = [
  {
    path: "/",
    name: "dashboard",
    Component: (props) => (
      <Page name={props.name} path={props.path}>
        <Dashboard />
      </Page>
    ),
  },
  {
    path: "/personal-information",
    title: ({ translation }) => translation("sidemenu.account"),
    icon: SVGUserIcon,
    name: "account",
    Component: (props) => (
      <Page name={props.name} path={props.path}>
        <Account />
      </Page>
    ),
  },
  {
    path: "/security",
    name: "account",
    title: ({ translation }) => translation("sidemenu.security"),
    icon: SVGShieldIcon,
    Component: (props) => (
      <Page name={props.name} path={props.path}>
        <Security />
      </Page>
    ),
  },
  {
    path: "/services/*",
    name: "account",
    title: ({ translation }) => translation("sidemenu.services"),
    icon: SVGServicesIcon,
    Component: (props) => (
      <Page name={props.name} path={props.path}>
        <Services />
      </Page>
    ),
  },
  { path: "/auth", name: 'auth', element: <StandalonePage><AuthFailure /></StandalonePage> },
  {
    path: "*",
    name: "404",
    title: "404",
    element: (
      <StandalonePage>
        <NoMatch />
      </StandalonePage>
    ),
  },
];

const useRoutesDefinition = function (): RoutePathDefinition[] {
  return routes;
};

export { useRoutesDefinition };
export default routes;