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

import {styled} 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 MenuBookIcon from '@material-ui/icons/MenuBook'
import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver'
import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
import Typography from '@material-ui/core/Typography'
import Box from '@material-ui/core/Box'

const PREFIX = 'navigasyon'

const classes = {
  root: `${PREFIX}-root`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.root}`]: {
    marginBottom: 50,
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper
  }
}))

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

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

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

  return (
    <Root
      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>
      )}
    </Root>
  )
}

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}`
  }
}

export default function Navigasyon({selectedTab}) {
  const router = useRouter()

  const [value, setValue] = useState(0)

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

    if (newValue !== selectedTab) {
      router.push(tabRouteHref[newValue], tabRouteAs[newValue]).then(() => window.scrollTo(0, 0))
    }
  }

  return (
    <div className={classes.root}>
      <AppBar style={{zIndex: 1}} 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='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
          <Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
          <Tab label='Soumèt' icon={<PlaylistAddIcon style={{fontSize: 30}} />} {...a11yProps(3)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0} />
      <TabPanel value={value} index={1} />
      <TabPanel value={value} index={2} />
      <TabPanel value={value} index={3} />
    </div>
  )
}

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