tabs

import PropTypes from "prop-types"
import { makeStyles, } from "@material-ui/core/styles"
import { track, } from "track"
import useLocalStorageState from "hooks/useLocalStorageState"
import { zIndexes, } from "constants/layers"
import { borderRadius, } from "theme"

import { AppBar, Box, Tabs as MuiTabs, Tab, Typography, } from "@material-ui/core"

export function a11yProps(index) {
  return {
    id: `scrollable-auto-tab-${index}`,
    "aria-controls": `scrollable-auto-tabpanel-${index}`,
  }
}

export function TabPanel(props) {
  const { children, value, index, ...other } = props

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`scrollable-auto-tabpanel-${index}`}
      aria-labelledby={`scrollable-auto-tab-${index}`}
      {...other}
    >
      <Box>{children}</Box>
    </Typography>
  )
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
}

export const useStyles = makeStyles((theme) => ({
  tabs: {
    backgroundColor: "#212121",
    color: "#fff",
    position: "sticky",
    zIndex: zIndexes.MID,
    borderRadius,
    marginBottom: theme.spacing(1),
  },
  tab: {
    backgroundColor: theme.palette.primary.dark,
    color: theme.palette.primary.contrastText,
    width: "100%",
    minWidth: "100px",
  },
}))

export const Tabs = ({ options, id = "KEY", }) => {
  const classes = useStyles()
  const [value, setValue,] = useLocalStorageState(id, 0)
  const handleChange = (event, newValue) => {
    track("TAB_CHANGE", newValue)

    setValue(newValue)
  }

  return (
    <>
      <AppBar className={classes.tabs}>
        <MuiTabs
          value={value}
          onChange={handleChange}
          orientation="horizontal"
          variant="scrollable"
          scrollButtons="auto"
          aria-label="scrollable auto tabs example"
        >
          {options.map(({ label, }, index) => (
            <Tab key={label} label={label} {...a11yProps(index)} />
          ))}
        </MuiTabs>
      </AppBar>
      {options.map(({ label, Component, }, index) => (
        <TabPanel key={label} value={value} index={index}>
          {value === index ? <Component /> : null}
        </TabPanel>
      ))}
    </>
  )
}