import React from "react";
import { Switch, Route } from "react-router";
import ROUTES from "Constants/routes";
import loadable from "@loadable/component";

// Load bundles asynchronously so that the initial render happens faster
const Welcome = loadable(() =>
  import(/* webpackChunkName: "WelcomeChunk" */ "Pages/welcome/welcome")
);
const About = loadable(() =>
  import(/* webpackChunkName: "AboutChunk" */ "Pages/about/about")
);
const Motd = loadable(() =>
  import(/* webpackChunkName: "MotdChunk" */ "Pages/motd/motd")
);
const Localization = loadable(() =>
  import(
    /* webpackChunkName: "LocalizationChunk" */ "Pages/localization/localization"
  )
);
const UndoRedo = loadable(() =>
  import(/* webpackChunkName: "UndoRedoChunk" */ "Pages/undoredo/undoredo")
);
const ContextMenu = loadable(() =>
  import(
    /* webpackChunkName: "ContextMenuChunk" */ "Pages/contextmenu/contextmenu"
  )
);

const Dashboard = loadable(() =>
  import(/* webpackChunkName: "InventoryChunk" */ "Pages/dashboard/dashboard")
);
const Inventory = loadable(() =>
  import(/* webpackChunkName: "InventoryChunk" */ "Pages/inventory/inventory")
);
const Info = loadable(() =>
  import(/* webpackChunkName: "InfoChunk" */ "Pages/itemInfo/itemInfo")
);
const Sales = loadable(() =>
  import(/* webpackChunkName: "InfoChunk" */ "Pages/sales/sales")
);
const Cards = loadable(() =>
  import(/* webpackChunkName: "InfoChunk" */ "Pages/cards")
);

class Routes extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path={ROUTES.WELCOME} component={Welcome}></Route>
        <Route path={ROUTES.ABOUT} component={About}></Route>
        <Route path={ROUTES.MOTD} component={Motd}></Route>
        <Route path={ROUTES.LOCALIZATION} component={Localization}></Route>
        <Route path={ROUTES.UNDOREDO} component={UndoRedo}></Route>
        <Route path={ROUTES.CONTEXTMENU} component={ContextMenu}></Route>

        <Route path={ROUTES.DASHBOARD} component={Dashboard}></Route>
        <Route path={ROUTES.INVENTORY} component={Inventory}></Route>
        <Route path={ROUTES.SALES} component={Sales}></Route>
        <Route path={ROUTES.INFO} component={Info}></Route>
        <Route path={ROUTES.CARDS} component={Cards}></Route>
      </Switch>
    );
  }
}

export default Routes;