import React from 'react'
import PropTypes from 'prop-types'
import {useRouter} from 'next/router'

import {makeStyles} from '@material-ui/core/styles'
import AppBar from '@material-ui/core/AppBar'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import HomeIcon from '@material-ui/icons/Home'
import PersonIcon from '@material-ui/icons/Person'
import MenuBookIcon from '@material-ui/icons/MenuBook'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'

const tabRouteHref = [
  '/',
  '/awtis?paj&paj=1',
  '/teks'
]

const tabRouteAs = [
  '/',
  '/awtis/paj/1',
  '/teks'
]

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

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

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

function a11yProps(index) {
  return {
    id: `scrollable-force-tab-${index}`,
    'aria-controls': `scrollable-force-tabpanel-${index}`
  }
}

const useStyles = makeStyles(theme => ({
  root: {
    marginBottom: 50,
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper
  }
}))

export default function Navigasyon({selectedTab}) {
  const router = useRouter()
  const classes = useStyles()
  const [value, setValue] = React.useState(0)

  const handleChange = (event, newValue) => {
    setValue(newValue)

    if (newValue !== selectedTab) {
      router.push(tabRouteHref[newValue], tabRouteAs[newValue])
    }
  }

  return (
    <div className={classes.root}>
      <AppBar position='fixed' color='default'>
        <Tabs
          value={selectedTab}
          variant='fullWidth'
          scrollButtons='on'
          indicatorColor='primary'
          textColor='primary'
          aria-label='scrollable force tabs example'
          onChange={handleChange}
        >
          <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
          <Tab label='Awtis' icon={<PersonIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
          <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0} />
      <TabPanel value={value} index={1} />
      <TabPanel value={value} index={2} />
    </div>
  )
}

Navigasyon.propTypes = {
  selectedTab: PropTypes.number.isRequired
}