import React from 'react'
import Image from 'next/image'
import {useRouter} from 'next/router'
import PropTypes from 'prop-types'
import {withStyles} from '@material-ui/core/styles'
import {Box, Button, Dialog} from '@material-ui/core'
import MuiDialogTitle from '@material-ui/core/DialogTitle'
import MuiDialogContent from '@material-ui/core/DialogContent'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from '@material-ui/icons/Close'
import Typography from '@material-ui/core/Typography'
import {Signal} from '@icons-pack/react-simple-icons'

import QRCode from '../../public/signal-qr-code.jpg'

const signalGourpUrl = process.env.NEXT_PUBLIC_SIGNAL_URL || 'https://signal.org/fr/download/'

const styles = theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(2)
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  }
})

const DialogTitle = withStyles(styles)(props => {
  const {children, classes, onClose, ...other} = props
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant='h6'>{children}</Typography>
      {onClose ? (
        <IconButton aria-label='close' className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  )
})

const DialogContent = withStyles(theme => ({
  root: {
    padding: theme.spacing(2)
  }
}))(MuiDialogContent)

export default function SignalDialog({ouve, handleFemen}) {
  const router = useRouter()

  const handleClick = () => {
    router.push(signalGourpUrl)
  }

  return (
    <div>
      <Dialog aria-labelledby='customized-dialog-title' open={ouve} onClose={handleFemen}>
        <DialogTitle style={{textAlign: 'center'}} id='customized-dialog-title' onClose={handleFemen}>
          Groupe Signal
        </DialogTitle>
        <DialogContent dividers>
          <Box style={{textAlign: 'center', marginBottom: 20}}>
            <Button
              variant='contained'
              color='primary'
              startIcon={<Signal />}
              onClick={handleClick}
            >
              Rejoindre
            </Button>
          </Box>
          <Box style={{textAlign: 'center'}}>
            <Image
              src={QRCode}
              width={300}
              height={300}
              placeholder='blur'
            />
          </Box>
        </DialogContent>
      </Dialog>
    </div>
  )
}

SignalDialog.propTypes = {
  ouve: PropTypes.bool.isRequired,
  handleFemen: PropTypes.func.isRequired
}