import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import classnames from "classnames";

// pages
import Dashboard from "../../pages/dashboard/Dashboard";
import Typography from "../../pages/typography/Typography";
import Notifications from "../../pages/notifications/Notifications";
import Maps from "../../pages/maps/Maps";
import Tables from "../../pages/tables/Tables";
import Icons from "../../pages/icons/Icons";
import Charts from "../../pages/charts/Charts";
import AppearancePage from "../../pages/settings/appearance/components/AppearancePage";
import ContentFooter from "./ContentFooter";

// context
import { useLayoutState } from "../../context/LayoutContext";

// styles
import useStyles from "./styles";

const Content = () => {
  // global
  var layoutState = useLayoutState();
  var classes = useStyles();

  return (
    <div
      className={classnames(classes.content, {
        [classes.contentShift]: layoutState.isSidebarOpened
      })}
    >
      <div className={classes.fakeToolbar} />
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/appearance" component={AppearancePage} />
        <Route path="/typography" component={Typography} />
        <Route path="/tables" component={Tables} />
        <Route path="/notifications" component={Notifications} />
        <Route exact path="/ui" render={() => <Redirect to="/ui/icons" />} />
        <Route path="/ui/maps" component={Maps} />
        <Route path="/ui/icons" component={Icons} />
        <Route path="/ui/charts" component={Charts} />
      </Switch>
      <ContentFooter />
    </div>
  );
};

export default Content;