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

const ModalCertificate = ({ open, onClose, json }) => {
  const [formData, setFormData] = useState({
    pere: '',
    mere: '',
    chefService: ''
  })

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

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

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="">
        <DialogTitle>Informations sur l'étudiant</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            required
            name="pere"
            label="Père de l'étudiant"
            type="text"
            fullWidth
            variant="outlined"
            value={formData.pere}
            color="warning"
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="mere"
            required
            label="Mère de l'étudiant"
            type="text"
            fullWidth
            variant="outlined"
            value={formData.mere}
            color="warning"
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="chefService"
            label="Chef de service de scolarité"
            type="text"
            fullWidth
            required
            color="warning"
            variant="outlined"
            value={formData.chefService}
            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 ModalCertificate
