text: import React from 'react'
  import PropTypes from 'prop-types'
  import { makeStyles } from '@material-ui/core/styles'
  import Tabs from '@material-ui/core/Tabs'
  import Tab from '@material-ui/core/Tab'
  import Typography from '@material-ui/core/Typography'
  import Box from '@material-ui/core/Box'
  import './VerticalTabs.css'
  import ChooseSides from '../ChooseSides/ChooseSides'
  import { useContext } from 'react'
  import AppContext from '../../utils/contexts/AppContext'
  import Preferences from '../Preferences/Preferences'
  import ChooseID from '../ChooseID/ChooseID'
  import Draft from '../Draft/Draft'
  import ViewDeck from '../ViewDeck/ViewDeck'
  
  
  function TabPanel(props) {   
  
    const { children, value, index, ...other } = props
  
    return (
      <div
        role='tabpanel'
        hidden={ value !== index }
        id={`vertical-tabpanel-${ index }`}
        aria-labelledby={`vertical-tab-${ index }`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    )
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  }
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      'aria-controls': `vertical-tabpanel-${index}`,
    }
  }
  
  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      display: 'flex',
      height: 224,
      ...theme.typography.button,
      backgroundColor: theme.palette.background.paper,
    },
    tabs: {
      borderRight: `1px solid ${theme.palette.divider}`,
      color: `${theme.palette.text.primary}`
    }
  }))
  
  export default function VerticalTabs() {
    const classes = useStyles()
    const { step } = useContext(AppContext)
  
    return (
      <div className={`${classes.root} VerticalTabs`}>
        <Tabs
          orientation='vertical'
          variant='scrollable'
          value={step}
          aria-label='Vertical tabs example'
          className={`${classes.tabs} Tabs`}
        >
          <Tab className='Tab' label='PREFERENCES' {...a11yProps(0)} disabled={step === 0 ? false : true} />
          <Tab className='Tab' label='CHOOSE SIDE' {...a11yProps(1)} disabled={step === 1 ? false : true} />
          <Tab className='Tab' label='CHOOSE ID' {...a11yProps(2)} disabled={step === 2 ? false : true} />
          <Tab className='Tab' label='DRAFT' {...a11yProps(3)} disabled={step === 3 ? false : true}/>
          <Tab className='Tab' label='VIEW DECK' {...a11yProps(4)} disabled={step === 4 ? false : true} />
        </Tabs>
        <TabPanel value={step} index={0} className='TabPanel'>
          <Preferences />
        </TabPanel>
        <TabPanel value={step} index={1} className='TabPanel'>
          <ChooseSides />
        </TabPanel>
        <TabPanel value={step} index={2} className='TabPanel'>
          <ChooseID />
        </TabPanel>
        <TabPanel value={step} index={3} className='TabPanel'>
          <Draft />
        </TabPanel>
        <TabPanel value={step} index={4} className='TabPanel'>
          <ViewDeck />
        </TabPanel>
      </div>
    )
  }