import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import AppBar from "@material-ui/core/AppBar";
import HomeRoundedIcon from "@material-ui/icons/HomeRounded";
import SubjectIcon from "@material-ui/icons/Subject";
import SchoolRoundedIcon from "@material-ui/icons/SchoolRounded";
import MailOutlineRoundedIcon from "@material-ui/icons/MailOutlineRounded";
import { Link } from "react-router-dom";

const useStyles = makeStyles({
  bottomNav: {
    maxWidth: "100%",
  },
  appBar: {
    top: "auto",
    bottom: 0,
  },
});

const MobileNavigation = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState("Home");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  useEffect(() => {
    if (window.location.pathname === "/" && value !== "Home") {
      setValue("Home");
    } else if (window.location.pathname === "/subject" && value !== "Subject") {
      setValue("Subject");
    } else if (
      window.location.pathname === "/semester" &&
      value !== "Semester"
    ) {
      setValue("Semester");
    } else if (window.location.pathname === "/about" && value !== "About") {
      setValue("About");
    }
  }, [value]);

  return (
    <React.Fragment>
      <AppBar position="fixed" color="primary" className={classes.appBar}>
        <BottomNavigation
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
          showLabels
          className={classes.root}
        >
          <BottomNavigationAction
            component={Link}
            to="/"
            value="Home"
            icon={<HomeRoundedIcon />}
            label="Home"
          />
          <BottomNavigationAction
            component={Link}
            to="/subject"
            value="Subject"
            icon={<SubjectIcon />}
            label="Subject"
          />
          <BottomNavigationAction
            component={Link}
            to="/semester"
            value="Semester"
            icon={<SchoolRoundedIcon />}
            label="Semester"
          />
          <BottomNavigationAction
            component={Link}
            to="/about"
            value="About"
            icon={<MailOutlineRoundedIcon />}
            label="About"
          />
        </BottomNavigation>
      </AppBar>
    </React.Fragment>
  );
};

export default MobileNavigation;