import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import classnames from "classnames";
import { Box, IconButton, Link } from "@material-ui/core";
import Icon from "@mdi/react";

//icons
import {
  mdiFacebook as FacebookIcon,
  mdiTwitter as TwitterIcon,
  mdiGithub as GithubIcon
} from "@mdi/js";

// 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";

// 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="/app/dashboard" component={Dashboard} />
        <Route path="/app/typography" component={Typography} />
        <Route path="/app/tables" component={Tables} />
        <Route path="/app/notifications" component={Notifications} />
        <Route
          exact
          path="/app/ui"
          render={() => <Redirect to="/app/ui/icons" />}
        />
        <Route path="/app/ui/maps" component={Maps} />
        <Route path="/app/ui/icons" component={Icons} />
        <Route path="/app/ui/charts" component={Charts} />
      </Switch>
      <Box
        mt={5}
        width={"100%"}
        display={"flex"}
        alignItems={"center"}
        justifyContent="space-between"
      >
        <div>
          <Link
            color={"primary"}
            href={"https://flatlogic.com/"}
            target={"_blank"}
            className={classes.link}
          >
            Flatlogic
          </Link>
          <Link
            color={"primary"}
            href={"https://flatlogic.com/about"}
            target={"_blank"}
            className={classes.link}
          >
            About Us
          </Link>
          <Link
            color={"primary"}
            href={"https://flatlogic.com/blog"}
            target={"_blank"}
            className={classes.link}
          >
            Blog
          </Link>
        </div>
        <div>
          <Link href={"https://www.facebook.com/flatlogic"} target={"_blank"}>
            <IconButton aria-label="facebook">
              <Icon path={FacebookIcon} size={1} color="#6E6E6E99" />
            </IconButton>
          </Link>
          <Link href={"https://twitter.com/flatlogic"} target={"_blank"}>
            <IconButton aria-label="twitter">
              <Icon path={TwitterIcon} size={1} color="#6E6E6E99" />
            </IconButton>
          </Link>
          <Link href={"https://github.com/flatlogic"} target={"_blank"}>
            <IconButton aria-label="github" style={{ marginRight: -12 }}>
              <Icon path={GithubIcon} size={1} color="#6E6E6E99" />
            </IconButton>
          </Link>
        </div>
      </Box>
    </div>
  );
};

export default Content;