import React, { useEffect, useState } from 'react'
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Button,
  Autocomplete,
  InputAdornment
} from '@mui/material'
import { MdRule } from 'react-icons/md'

const ModalUpdateParcoursEtudiant = ({ open, onClose, user_id, onSubmit }) => {
  const [formData, setFormData] = useState({
    parcours: '',
    user_id: ''
  })
  const [parcours, setParcours] = useState([])

  useEffect(() => {
    window.notesysteme.getParcours().then((response) => {
      setParcours(response)
    })
  }, [])

  useEffect(() => {
    if (user_id) {
      setFormData((prevData) => ({
        ...prevData,
        user_id: user_id
      }))
    }
  }, [user_id])

  const handleSubmit = async (e) => {
    e.preventDefault()

    let response = await window.etudiants.changeParcours(formData)

    if (response.changes) {
      onSubmit(true, formData.parcours)
      onClose()
    }
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="">
        <DialogTitle>Ajouter un parcours</DialogTitle>
        <DialogContent>
          <Autocomplete
            options={parcours} // Options array for Autocomplete
            getOptionLabel={(option) => option.nom || ''} // Display `nom`
            value={parcours.find((item) => item.nom === formData.parcours) || null} // Find selected option based on `nom`
            onChange={(event, newValue) => {
              setFormData((prevData) => ({
                ...prevData,
                parcours: newValue ? newValue.nom : '' // Store only `nom`
              }))
            }}
            size="small"
            isOptionEqualToValue={(option, value) => option.nom === value?.nom} // Ensure correct matching
            renderInput={(params) => (
              <TextField
                {...params}
                label="Parcours"
                margin="normal"
                color="warning"
                placeholder="Sélectionnez une mention"
                InputProps={{
                  ...params.InputProps,
                  startAdornment: (
                    <>
                      <InputAdornment position="start">
                        <MdRule />
                      </InputAdornment>
                      {params.InputProps.startAdornment}
                    </>
                  )
                }}
                sx={{
                  marginBottom: '5px',
                  '& .MuiOutlinedInput-root': {
                    '&:hover fieldset': {
                      borderColor: '#ff9800' // Set border color on hover
                    }
                  }
                }}
              />
            )}
          />
        </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 ModalUpdateParcoursEtudiant
