import React, { useState } from 'react'
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material'
import PDFEditorRecepice from './function/PDFEditorRecepisse'

const ModalRecepice = ({ open, onClose, json }) => {
  const [formData, setFormData] = useState({
    nom: ''
  })

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData({ ...formData, [name]: value })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
    let data = {
      f1: json.mention,
      f2: json.niveau,
      f3: json.nomPrenom,
      f4: json.inscri,
      f6: json.annee,
      f7: formData.nom
    }
    // Handle the form submission (e.g., send to a server or process data)
    PDFEditorRecepice(data)
    setFormData({
      nom: ''
    })
    onClose() // Close the modal after submission
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="">
        <DialogTitle>Informations suplementaire</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            required
            name="nom"
            label="Nom et prénom du chef de services"
            type="text"
            fullWidth
            variant="outlined"
            value={formData.nom}
            color="warning"
            onChange={handleChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose} color="warning" variant="contained">
            Annuler
          </Button>
          <Button onClick={handleSubmit} type="submit" color="warning" variant="contained">
            Soumettre
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  )
}

export default ModalRecepice
