import {useState} from 'react'
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid2'
import IconButton from '@mui/material/IconButton'
import CloseIcon from '@mui/icons-material/Close'
import PublicIcon from '@mui/icons-material/Public'

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

import KatRezoNou from './kat-rezo-nou'

function BootstrapDialogTitle(props) {
  const {children, onClose, ...other} = props

  return (
    <DialogTitle sx={{m: 0, p: 2, textAlign: 'center'}} {...other}>
      {children}
      {onClose ? (
        <IconButton
          aria-label='close'
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: theme => theme.palette.grey[500],
          }}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </DialogTitle>
  )
}

BootstrapDialogTitle.propTypes = {
  children: PropTypes.node,
  onClose: PropTypes.func.isRequired,
}

export default function RezoDialog() {
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <div>
      <Button variant='outlined' size='large' endIcon={<PublicIcon />} onClick={handleClickOpen}>
        <strong>Fédiverse</strong>
      </Button>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        aria-labelledby='rézo-dialog'
        onClose={handleClose}
      >
        <BootstrapDialogTitle id='rézo-dialog' onClose={handleClose}>
          OKI sur le <strong>Fédiverse</strong>
        </BootstrapDialogTitle>
        <DialogContent>
          <Box>
            <Grid container rowSpacing={1} columnSpacing={{xs: 1, sm: 2, md: 3}}>
              {rezoNou.map(({tit, img, soutit, ko, lyen}) => <KatRezoNou key={tit} tit={tit} img={img} soutit={soutit} ko={ko} lyen={lyen} />)}
            </Grid>
          </Box>
        </DialogContent>
      </Dialog>
    </div>
  )
}