import React, { useEffect, useState } from 'react'
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Button,
  Box,
  Typography
} from '@mui/material'

const DeleteTranche = ({ open, onClose, id, onSubmitSuccess }) => {
  const [idDelete, setIdDelete] = useState(null)

  useEffect(() => {
    setIdDelete(id)
  }, [id])

  console.log(idDelete)

  const deleteOption = async () => {
    if (idDelete !== null) {
      const id = idDelete
      let response = await window.etudiants.deleteTranche({ id })
      if (response.success) {
        onSubmitSuccess(true)
        onClose()
      }
    }
  }

  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Suppression</DialogTitle>
      <DialogContent>
        <Box sx={{ flexGrow: 1, width: '300px' }}>
          <Typography>Voulez vous Supprimer ?</Typography>
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="error">
          Annuler
        </Button>
        <Button onClick={deleteOption} color="warning">
          Soumettre
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default DeleteTranche
