import React, { useRef, useState } from 'react'
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Button } from '@mui/material'
import PDFEditorStage from './function/PDFEditorStage'
import ChangeCapital from './function/ChangeCapitalLetter'
import ChangeCapitalize from './function/ChangeCapitalizeLetter'

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

  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: formData.nom + ' ' + formData.prenom
    }
    // Handle the form submission (e.g., send to a server or process data)
    PDFEditorStage(data)
    setFormData({
      nom: '',
      prenom: ''
    })
    onClose() // Close the modal after submission
  }

  const nomRef = useRef()
  const prenomRef = useRef()

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="">
        <DialogTitle>Informations suplementaire</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            margin="dense"
            required
            name="nom"
            label="Nom du directeur"
            type="text"
            fullWidth
            variant="outlined"
            value={formData.nom}
            inputRef={nomRef}
            onInput={() => ChangeCapital(nomRef)}
            color="warning"
            onChange={handleChange}
          />
          <TextField
            margin="dense"
            name="prenom"
            required
            label="Prénom du directeur"
            type="text"
            fullWidth
            variant="outlined"
            inputRef={prenomRef}
            value={formData.prenom}
            onInput={() => ChangeCapitalize(prenomRef)}
            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 ModalStage
