import {useState} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'

import {validateEmail} from '../../lib/utils/emails'
import {jwennUserEpiEmail} from '../../lib/oki-api'

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'

export default function ResetDialog({lyen, title, activation, content, open, setOpen, setLoading, setError, setSuccess}) {
  const [email, setEmail] = useState('')

  const forgotPasswordRequest = async () => {
    setLoading(true)
    try {
      await axios.post(`${API_URL}/auth/${lyen}`, {
        email
      })

      if (activation) {
        const user = await jwennUserEpiEmail(email)
        localStorage.setItem('user-id', user?._id)
      }

      setLoading(false)
      setSuccess(true)
    } catch {
      setError('Une erreur s’est produite. Veuillez réessayer ultérieurement')
      setLoading(false)
    }
  }

  const resetFrom = () => {
    setEmail('')
  }

  const handleClick = async () => {
    forgotPasswordRequest()
    setOpen(false)
    resetFrom()
  }

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

  return (
    <div>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {content}
          </DialogContentText>
          <TextField
            autoFocus
            fullWidth
            value={email}
            margin='dense'
            id='email'
            label='Adresse e-mail'
            type='email'
            variant='standard'
            onChange={event => setEmail(event.target.value)}
          />
        </DialogContent>
        <DialogActions>
          <Button variant='contained' color='secondary' onClick={handleClose}>Annuler</Button>
          <Button disabled={!validateEmail(email)} variant='contained' color='primary' onClick={handleClick}>Valider</Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

ResetDialog.defaultProps = {
  activation: false
}

ResetDialog.propTypes = {
  lyen: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  activation: PropTypes.bool,
  content: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
  setOpen: PropTypes.func.isRequired,
  setLoading: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  setSuccess: PropTypes.func.isRequired,
}