import React, { useEffect, useRef, useState } from 'react'
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Button,
  InputAdornment,
  Box,
  Grid
} from '@mui/material'
import ChangeCapital from './function/ChangeCapitalLetter'
import ChangeCapitalize from './function/ChangeCapitalizeLetter'
import { PiChalkboardTeacher } from 'react-icons/pi'
import { MdContactPhone, MdDateRange } from 'react-icons/md'

const UpdateModalProf = ({ open, onClose, matiere_id, onSubmitSuccess }) => {
  const [formData, setFormData] = useState({
    nom_enseignant: '',
    prenom_enseignant: '',
    contact: '',
    date: '',
    matiere_id: ''
  })

  const nomRefs = useRef()
  const prenomRefs = useRef()

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

  useEffect(() => {
    let id = matiere_id
    if (id !== '') {
      window.matieres.getSingleProf({ id }).then((response) => {
        setFormData((prev) => ({
          ...prev,
          nom_enseignant: response.nom_enseignant,
          prenom_enseignant: response.prenom_enseignant,
          contact: response.contact,
          date: response.date,
          matiere_id: matiere_id
        }))
      })
    }
  }, [matiere_id])

  const handleSubmit = async (e) => {
    e.preventDefault()
    let response = await window.matieres.updateProf(formData)

    if (response.success) {
      onSubmitSuccess(true)
      onClose() // Close the modal after submission
    }
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="" onSubmit={handleSubmit}>
        <DialogTitle>mise à jour enseignant</DialogTitle>
        <DialogContent>
          <Box sx={{ flexGrow: 1 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="nom_enseignant"
                  label="Nom du professeur"
                  type="text"
                  fullWidth
                  placeholder="Nom du professeur"
                  variant="outlined"
                  value={formData.nom_enseignant}
                  color="warning"
                  inputRef={nomRefs}
                  onInput={() => ChangeCapital(nomRefs)}
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PiChalkboardTeacher />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="prenom_enseignant"
                  label="Prénom du professeur"
                  type="text"
                  fullWidth
                  placeholder="Prénom du professeur"
                  variant="outlined"
                  value={formData.prenom_enseignant}
                  color="warning"
                  inputRef={prenomRefs}
                  onInput={() => ChangeCapitalize(prenomRefs)}
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PiChalkboardTeacher />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="contact"
                  label="Contact"
                  type="number"
                  fullWidth
                  placeholder="Contact"
                  variant="outlined"
                  value={formData.contact}
                  color="warning"
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <MdContactPhone />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="date"
                  label="Date de prise du poste"
                  type="date"
                  fullWidth
                  variant="outlined"
                  value={formData.date}
                  color="warning"
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <MdDateRange />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
            </Grid>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose} color="error">
            Annuler
          </Button>
          <Button type="submit" color="warning">
            Soumettre
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  )
}

export default UpdateModalProf
