import {useState} from 'react'
import {styled} from '@mui/material/styles'
import {Box, Container, Link, Typography, 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.mode === 'light' ? theme.palette.grey[100] : '#1E3526'
  },

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

export default function Footer() {
  const [open, setOpen] = useState(false)
  const isMobile = useMediaQuery('(max-width:527px)')

  return (
    (
      <Root>
        <CGUDialog open={open} setOpen={setOpen} />
        <footer 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' : ''}}>
              <Typography className={classes.text} align='center' variant='body1'>
                <Link underline='hover' href='#cgu' onClick={() => setOpen(true)}>
                  Voir les CGU et la politique de confidentialité
                </Link>
              </Typography>
            </Box>
            <Box sx={{display: 'flex', justifyContent: 'center'}}>
              {rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
            </Box>
          </Container>
        </footer>
      </Root>
    )
  )
}