import React, { useEffect } from "react";
import { Grid, Typography, Toolbar, AppBar, Chip } from "@material-ui/core";
import LocalOfferIcon from "@material-ui/icons/LocalOffer";
import AssignmentTurnedInIcon from "@material-ui/icons/AssignmentTurnedIn";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import { getAreas, clearArea, clearLabel } from "./mainSlice";
import { logout } from "../auth/authSlice";
import BusinessOutlinedIcon from "@material-ui/icons/BusinessOutlined";
import PersonPinCircleIcon from "@material-ui/icons/PersonPinCircle";
import { useSelector, useDispatch } from "react-redux";
import History from "../history/History";

export const Header = () => {
  const branch = useSelector((state) => state.main.branch);
  const user = useSelector((state) => state.auth.user);
  const area = useSelector((state) => state.main.area);
  const label = useSelector((state) => state.main.label);
  const inventory_taking = useSelector((state) => state.main.inventory_taking);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getAreas(branch));
  }, [dispatch, branch, label]);

  const renderInventoryTaking = () => {
    if (inventory_taking) {
      return (
        <Chip
          icon={<AssignmentTurnedInIcon />}
          label={inventory_taking.name}
          color="secondary"
        />
      );
    } else return null;
  };

  const renderNavigation = () => {
    return (
      <>
        <Chip
          icon={<BusinessOutlinedIcon />}
          label={branch.name}
          color="secondary"
        />
        <Chip
          icon={<PersonPinCircleIcon />}
          label={area.name}
          color="secondary"
          onDelete={() => dispatch(clearArea())}
        />
        <Chip
          icon={<LocalOfferIcon />}
          label={label}
          variant="outlined"
          color="secondary"
          onDelete={() => dispatch(clearLabel())}
        />
        <Chip
          icon={<AccountCircleIcon />}
          label={user.username}
          onDelete={() => dispatch(logout())}
          variant="outlined"
          color="secondary"
        />
      </>
    );
  };

  return (
    <AppBar position="static">
      <Toolbar>
        <Grid justify="space-between" container spacing={2}>
          {" "}
          <History />
          <Typography variant="h6" color="inherit">
            {process.env.REACT_APP_NAME}-{process.env.REACT_APP_VERSION}
          </Typography>
          {renderInventoryTaking()}
          {renderNavigation()}
        </Grid>
      </Toolbar>
    </AppBar>
  );
};

export default Header;