import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import HomeIcon from "@material-ui/icons/Home";
import Button from "@material-ui/core/Button";
import auth from "./../auth/auth-helper";
import { Link, withRouter } from "react-router-dom";
import CartIcon from "@material-ui/icons/LabelImportant";
import Badge from "@material-ui/core/Badge";
import cart from "./../cart/cart-helper";

const isActive = (history, path) => {
  if (history.location.pathname == path) return { color: "#bef67a" };
  else return { color: "#ffffff" };
};
const isPartActive = (history, path) => {
  if (history.location.pathname.includes(path)) return { color: "#bef67a" };
  else return { color: "#ffffff" };
};
const Menu = withRouter(({ history }) => (
  <AppBar position="static" style={{ backgroundColor: "blue" }}>
    <Toolbar>
      {/* <Typography variant="h6" color="inherit">
        SWIFT
      </Typography> */}
      <div>
        <img
          src="https://i.ibb.co/Rb5JLsv/logo.png"
          alt="logo"
          border="0"
          height={60}
          width={110}
        />
      </div>
      <div>
        <Link to="/">
          <IconButton aria-label="Home" style={isActive(history, "/")}>
            <HomeIcon />
          </IconButton>
        </Link>
        <Link to="/requests/all">
          <Button style={isActive(history, "/requests/all")}>
            All Active Requests
          </Button>
        </Link>
        <Link to="/cart">
          <Button style={isActive(history, "/cart")}>
            Pending
            <Badge
              color="secondary"
              invisible={false}
              badgeContent={cart.itemTotal()}
              style={{ marginLeft: "7px" }}
            >
              <CartIcon />
            </Badge>
          </Button>
        </Link>
      </div>
      <div style={{ position: "absolute", right: "10px" }}>
        <span style={{ float: "right" }}>
          {!auth.isAuthenticated() && (
            <span>
              <Link to="/signup">
                <Button style={isActive(history, "/signup")}>Sign up</Button>
              </Link>
              <Link to="/signin">
                <Button style={isActive(history, "/signin")}>Sign In</Button>
              </Link>
            </span>
          )}
          {auth.isAuthenticated() && (
            <span>
              {auth.isAuthenticated().user.seller && (
                <Link to="/seller/requests">
                  <Button style={isPartActive(history, "/seller/")}>
                    My Requests
                  </Button>
                </Link>
              )}
              <Link to={"/user/" + auth.isAuthenticated().user._id}>
                <Button
                  style={isActive(
                    history,
                    "/user/" + auth.isAuthenticated().user._id
                  )}
                >
                  My Profile
                </Button>
              </Link>
              <Button
                color="inherit"
                onClick={() => {
                  auth.clearJWT(() => history.push("/"));
                }}
              >
                Sign out
              </Button>
            </span>
          )}
        </span>
      </div>
    </Toolbar>
  </AppBar>
));

export default Menu;