import React, { useEffect, useState } from 'react';
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  TextField,
  Button,
  InputAdornment,
  Box,
  Grid,
  FormControl,
  InputLabel,
  Select,
  OutlinedInput,
  MenuItem
} from '@mui/material'

const ParcourMatiere = ({ open, onClose, matiere_id }) => {
  const [formData, setFormData] = useState({
    parcour_id: [],
    matiere_id: ''
  })

  const [parcours, setParcours] = useState([])
  const [parcoursMatiere, setParcoursMatiere] = useState([])

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

  useEffect(() => {
    if (matiere_id) {
      setFormData({
        matiere_id: matiere_id
      })

      window.notesysteme.getParcourMatiere({ matiere_id }).then((response) => {
        setParcoursMatiere(response)
      })
    }
  }, [matiere_id])

  useEffect(() => {
    if (parcoursMatiere.length !== 0) {
      const parcourIds = parcoursMatiere.map((item) => item.parcour_id)

      setFormData((prevState) => ({
        ...prevState,
        parcour_id: parcourIds // Merge & remove duplicates
      }))
    }
  }, [parcoursMatiere])

  const handleChange = (event) => {
    const { name, value } = event.target

    setFormData((prevState) => ({
      ...prevState,
      [name]: value // Ensures multiple selection works correctly
    }))
  }

  const formSubmit = async (e) => {
    e.preventDefault()
    let response = await window.notesysteme.parcourMatiere(formData)
    if (response.success) {
      onClose()
    }
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="" onSubmit={formSubmit}>
        <DialogTitle>Assignation à des parcours</DialogTitle>
        <DialogContent>
          <Box sx={{ flexGrow: 1 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <FormControl sx={{ m: 1, width: 300 }}>
                  <InputLabel id="parcours-select-label" color="warning">
                    Parcours
                  </InputLabel>
                  <Select
                    labelId="parcours-select-label"
                    id="parcours-select"
                    multiple
                    name="parcour_id"
                    value={formData.parcour_id || []}
                    onChange={handleChange}
                    color="warning"
                    size="small"
                    required
                    input={<OutlinedInput label="Parcours" />} // Fixed label name
                    MenuProps={{
                      PaperProps: {
                        style: {
                          maxHeight: 200, // Limit dropdown height
                          width: 250 // Adjust dropdown width if needed
                        }
                      }
                    }}
                  >
                    {parcours.map((sem) => (
                      <MenuItem key={sem.id} value={sem.id}>
                        {sem.nom}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </Grid>
            </Grid>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose} color="error">
            Annuler
          </Button>
          <Button type="submit" color="warning">
            Soumettre
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  )
}

export default ParcourMatiere
