import React, { useState } from "react";
import {
  AppBar,
  Typography,
  Tabs,
  Tab,
  Toolbar,
  Button,
} from "@material-ui/core";

import { authActions } from "../../store/auth-slice";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";

export default function NavBar() {
  const [Value, setValue] = useState(0);

  const dispatch = useDispatch();
  const user = useSelector((state: any) => state.auth.user);

  const handleClickTab = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  const logoutHandler = () => {
    dispatch(authActions.logout());
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar style={{ justifyContent: "space-between" }} variant="dense">
          <div style={{ display: "flex" }}>
            <Typography>SVET</Typography>
          </div>

          <Tabs
            onChange={handleClickTab}
            indicatorColor="secondary"
            value={Value}
          >
            <Tab disableRipple label="Sales" component={Link} to="/sales" />
            <Tab
              disableRipple
              label="Products"
              component={Link}
              to="/products"
            />
            <Tab
              disableRipple
              label="Inventory"
              component={Link}
              to="/inventory"
            />
            <Tab
              disableRipple
              label="Customers"
              component={Link}
              to="/customers"
            />
            <Tab disableRipple label="Users" component={Link} to="/users" />
            <Tab
              disableRipple
              label="Settings"
              component={Link}
              to="/settings"
            />
          </Tabs>
          <p>{user}</p>
          <button onClick={logoutHandler}>LogOut</button>
          <Button variant="contained" color="secondary">
            Profile
          </Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}