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

import {styled} from '@mui/material/styles'
import AppBar from '@mui/material/AppBar'
import Tabs, {tabsClasses} from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import {useMediaQuery} from '@mui/material'

import MusicNoteIcon from '@mui/icons-material/MusicNote'
import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'
import HomeIcon from '@mui/icons-material/Home'
import EditNoteIcon from '@mui/icons-material/EditNote'
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'

const PREFIX = 'navigasyon'

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

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

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

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

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

export default function Navigasyon({selectedTab}) {
  const router = useRouter()
  const isMobile = useMediaQuery('(max-width:422px)')
  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 (
    <Appdiv>
      <div className={classes.root}>
        <AppBar style={{zIndex: 10, boxShadow: 'none'}} position='fixed' color='default'>
          <Tabs
            allowScrollButtonsMobile
            scrollButtons
            centered={Boolean(!isMobile)}
            value={selectedTab}
            indicatorColor='primary'
            textColor='primary'
            aria-label='tabs menu'
            variant={isMobile ? 'scrollable' : 'fullWidth'}
            sx={{
              [`& .${tabsClasses.scrollButtons}`]: {
                '&.Mui-disabled': {opacity: 0.3},
              },
            }}
            onChange={handleChange}
          >
            <Tab icon={<HomeIcon />} aria-label='Accueil' {...a11yProps(0)} />
            <Tab icon={<VolunteerActivismIcon />} aria-label='Nous soutenir' {...a11yProps(1)} />
            <Tab icon={<MusicNoteIcon />} aria-label='Paroles' {...a11yProps(2)} />
            <Tab icon={<RecordVoiceOverIcon />} aria-label='Artistes' {...a11yProps(3)} />
            <Tab icon={<EditNoteIcon />} aria-label='Soumettre' {...a11yProps(4)} />
          </Tabs>
        </AppBar>
        <TabPanel value={value} index={0} />
        <TabPanel value={value} index={1} />
        <TabPanel value={value} index={2} />
        <TabPanel value={value} index={3} />
        <TabPanel value={value} index={4} />
      </div>
    </Appdiv>
  )
}

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