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

const UpdateTranche = ({ open, onClose, onSubmitSuccess, id }) => {
  const [formData, setFormData] = useState({
    id: id,
    tranchename: '',
    montant: ''
  })
  const [tranche, setTranche] = useState([])

  useEffect(() => {
    if (id !== null) {
      window.etudiants.getSingleTranche({ id }).then((response) => {
        setTranche(response)
      })
      setFormData({
        id: id
      })
    }
  }, [id])

  useEffect(() => {
    setFormData((prev) => ({
      ...prev,
      tranchename: tranche.tranchename || '',
      montant: tranche.montant || ''
    }))
  }, [tranche])

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

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

    if (response.changes) {
      onClose()
      onSubmitSuccess(true)
    }
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <form action="" onSubmit={handleSubmit}>
        <DialogTitle>Ajout tranche</DialogTitle>
        <DialogContent>
          <Box sx={{ flexGrow: 1 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="tranchename"
                  label="Désignation"
                  type="text"
                  fullWidth
                  placeholder="Tranche 1"
                  variant="outlined"
                  value={formData.tranchename}
                  color="warning"
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <MdLabelImportantOutline />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoFocus
                  margin="normal"
                  required
                  name="montant"
                  label="Montant"
                  type="number"
                  fullWidth
                  placeholder="Montant"
                  variant="outlined"
                  value={formData.montant}
                  color="warning"
                  onChange={handleChange}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <MdLabelImportantOutline />
                      </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 UpdateTranche
