import React, { useState, useEffect } from "react";
import { Link, useHistory } from "react-router-dom";
import { Button, IconButton, Grid, Hidden, Avatar } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import {
  HomeRounded,
  AssistantRounded,
  AddCircleRounded,
  ExploreRounded,
  AccountCircleRounded,
  ExitToAppRounded,
} from "@material-ui/icons";

import styles from "./style";
import { lightTheme, darkTheme } from "../../theme";
import { auth } from "../../firebase";

const useStyles = makeStyles(styles);
function Sidebar({
  user,
  isLightTheme,
  setIsLightTheme,
  setOpenSignIn,
  setOpenSignUp,
}) {
  const classes = useStyles();
  const history = useHistory();
  const [pageSelected, setPageSelected] = useState({
    home: false,
    about: false,
    upload: false,
    explore: false,
    profile: false,
  });

  const getSelectedStyle = (selected) => {
    if (isLightTheme)
      return selected
        ? lightTheme.palette.text.primary
        : lightTheme.palette.text.secondary;
    else
      return selected
        ? darkTheme.palette.text.primary
        : darkTheme.palette.text.secondary;
  };

  const setSelected = () => {
    const tempSelected = pageSelected;
    for (let i in tempSelected) tempSelected[i] = false;

    switch (window.location.pathname) {
      case "/home":
        tempSelected.home = true;
        break;
      case "/about":
        tempSelected.about = true;
        break;
      case "/upload":
        tempSelected.upload = true;
        break;
      case "/explore":
        tempSelected.explore = true;
        break;
      case "/profile":
        tempSelected.profile = true;
        break;
      default:
        console.log("404");
    }
    setPageSelected({ ...tempSelected });
  };

  useEffect(() => {
    setSelected();
    return history.listen(() => {
      setSelected();
    });
  }, []);

  return (
    <Grid item xs={0} sm={4} className={classes.sidebar}>
      <Hidden xsDown>
        <div
          className={classes.navLinks}
          style={{ height: window.innerHeight - 110 }}
        >
          <Link
            to="/home"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.home) }}
          >
            <HomeRounded />
            <span>Home</span>
          </Link>

          <Link
            to="/about"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.about) }}
          >
            <AssistantRounded />
            <span>About</span>
          </Link>

          {user?.displayName ? (
            <Link
              to="/upload"
              className={classes.link}
              style={{ color: getSelectedStyle(pageSelected.upload) }}
            >
              <AddCircleRounded />
              <span>Upload</span>
            </Link>
          ) : null}

          <Link
            to="/explore"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.explore) }}
          >
            <ExploreRounded />
            <span>Explore</span>
          </Link>

          {user?.displayName ? (
            <Link
              to="/profile"
              className={classes.link}
              style={{ color: getSelectedStyle(pageSelected.profile) }}
            >
              <AccountCircleRounded />
              <span>Profile</span>
            </Link>
          ) : null}
        </div>

        {user?.displayName ? (
          <div className={classes.account}>
            <Avatar src="" alt="User" className={classes.userPhoto} />
            <span className={classes.username}>{user?.displayName}</span>
            <IconButton
              className={classes.logOutBtn}
              onClick={() => {auth.signOut(); localStorage?.removeItem('lightThemeStatus');}}
            >
              <ExitToAppRounded color="error" className={classes.logOutIcon} />
            </IconButton>
          </div>
        ) : (
          <div className={classes.authBox}>
            <Button
              className={classes.signInBtn}
              onClick={() => setOpenSignIn(true)}
            >
              Sign In
            </Button>
            <Button
              className={classes.signUpBtn}
              onClick={() => setOpenSignUp(true)}
            >
              Sign Up
            </Button>
          </div>
        )}
      </Hidden>
    </Grid>
  );
}

export default Sidebar;