1import React from 'react';
  2import { Link, useLocation } from 'react-router-dom';
  3
  4import AppBar from '@material-ui/core/AppBar';
  5import Tab, { TabProps } from '@material-ui/core/Tab';
  6import Tabs from '@material-ui/core/Tabs';
  7import Toolbar from '@material-ui/core/Toolbar';
  8import Tooltip from '@material-ui/core/Tooltip/Tooltip';
  9import { makeStyles } from '@material-ui/core/styles';
 10
 11import { LightSwitch } from '../../components/Themer';
 12import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
 13
 14const useStyles = makeStyles((theme) => ({
 15  offset: {
 16    ...theme.mixins.toolbar,
 17  },
 18  filler: {
 19    flexGrow: 1,
 20  },
 21  appBar: {
 22    backgroundColor: theme.palette.primary.dark,
 23    color: theme.palette.primary.contrastText,
 24  },
 25  appTitle: {
 26    ...theme.typography.h6,
 27    color: theme.palette.primary.contrastText,
 28    textDecoration: 'none',
 29    display: 'flex',
 30    alignItems: 'center',
 31  },
 32  lightSwitch: {
 33    padding: '0 20px',
 34  },
 35  logo: {
 36    height: '42px',
 37    marginRight: theme.spacing(2),
 38  },
 39}));
 40
 41function a11yProps(index: any) {
 42  return {
 43    id: `nav-tab-${index}`,
 44    'aria-controls': `nav-tabpanel-${index}`,
 45  };
 46}
 47
 48const DisabledTabWithTooltip = (props: TabProps) => {
 49  /*The span elements around disabled tabs are needed, as the tooltip
 50   * won't be triggered by disabled elements.
 51   * See: https://material-ui.com/components/tooltips/#disabled-elements
 52   * This must be done in a wrapper component, otherwise the TabS component
 53   * cannot pass it styles down to the Tab component. Resulting in (console)
 54   * warnings. This wrapper acceps the passed down TabProps and pass it around
 55   * the span element to the Tab component.
 56   */
 57  const msg = `This feature doesn't exist yet. Come help us build it.`;
 58  console.log(props);
 59  return (
 60    <Tooltip title={msg}>
 61      <span>
 62        <Tab disabled {...props} />
 63      </span>
 64    </Tooltip>
 65  );
 66};
 67
 68function Header() {
 69  const classes = useStyles();
 70  const location = useLocation();
 71  const [selectedTab, setTab] = React.useState(location.pathname);
 72  console.log(location.pathname);
 73
 74  const handleTabClick = (
 75    event: React.ChangeEvent<{}>,
 76    newTabValue: string
 77  ) => {
 78    setTab(newTabValue);
 79  };
 80
 81  return (
 82    <>
 83      <AppBar position="fixed" className={classes.appBar}>
 84        <Toolbar>
 85          <Link to="/" className={classes.appTitle}>
 86            <img
 87              src="/logo.svg"
 88              className={classes.logo}
 89              alt="git-bug logo"
 90            />
 91            git-bug
 92          </Link>
 93          <div className={classes.filler} />
 94          <div className={classes.lightSwitch}>
 95            <LightSwitch />
 96          </div>
 97          <CurrentIdentity />
 98        </Toolbar>
 99      </AppBar>
100      <div className={classes.offset} />
101      <Tabs
102        centered
103        value={selectedTab}
104        onChange={handleTabClick}
105        aria-label="nav tabs"
106      >
107        <DisabledTabWithTooltip
108          label="Code"
109          value="/code"
110          {...a11yProps(1)}
111        />
112        <Tab label="Bugs" value="/" href="/" {...a11yProps(2)} />
113        <DisabledTabWithTooltip
114          label="Pull Requests"
115          value="/pulls"
116          {...a11yProps(3)}
117        />
118        <DisabledTabWithTooltip
119          label="Settings"
120          value="/settings"
121          {...a11yProps(4)}
122        />
123      </Tabs>
124    </>
125  );
126}
127
128export default Header;