'use client'

import {useRouter, usePathname} from 'next/navigation'

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 {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 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 = [
  '/',
  '/sipote',
  '/paroles',
  '/awtis'
]

const tabPath = {
  akey: 0,
  sipote: 1,
  paroles: 2,
  awtis: 3,
}

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

export default function Navigasyon() {
  const router = useRouter()
  const pathname = usePathname()
  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
  const selectedTab = tabPath[selectedPath]

  const isMobile = useMediaQuery('(max-width:422px)')

  const handleChange = (event, newValue) => {
    if (newValue !== selectedTab) {
      router.push(tabRouteHref[newValue])
    }
  }

  return (
    <Appdiv>
      <div className={classes.root}>
        <AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
          {selectedTab !== undefined && (
            <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)} />
            </Tabs>
          )}
        </AppBar>
      </div>
    </Appdiv>
  )
}
