'use client'

import {useState} from 'react'
import {usePathname} from 'next/navigation'
import {styled} from '@mui/material/styles'
import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import {useMediaQuery} from '@mui/material'

import {rezoLis} from '../lib/rezo-lis'

import CGUDialog from './cgu/cgu-dialog'
import Rezo from './rezo'

const PREFIX = 'footer'

const classes = {
  footer: `${PREFIX}-footer`,
  text: `${PREFIX}-text`
}

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.footer}`]: {
    padding: theme.spacing(1, 2),
    marginTop: 'auto',
    backgroundColor: theme.palette.grey[100],
    ...theme.applyStyles('dark', {
      backgroundColor: '#1E3526'
    })
  },

  [`& .${classes.text}`]: {
    fontWeight: 'bold'
  }
}))

export default function Footer() {
  const pathname = usePathname()
  const [open, setOpen] = useState(false)
  const isMobile = useMediaQuery('(max-width:527px)')
  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]

  return (
    (
      <Root>
        <CGUDialog open={open} setOpen={setOpen} />
        <footer>
          <Box sx={{ml: selectedPath === 'paroles' && !isMobile ? '240px' : ''}} id='cgu' className={classes.footer}>
            <Container sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
              <Box sx={{textAlign: isMobile ? 'center' : '', marginTop: isMobile ? '1em' : ''}}>
                <Button color='primary' onClick={() => setOpen(true)}>
                  <Typography variant='button' sx={{fontWeight: 'bold'}}>Voir les CGU et la politique de confidentialité</Typography>
                </Button>
              </Box>
              <Box sx={{display: 'flex', justifyContent: 'center'}}>
                {rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
              </Box>
            </Container>
          </Box>
        </footer>
      </Root>
    )
  )
}