// ** React Imports
import { Fragment, useState } from 'react'
import { DialogAlertType } from 'src/types/apps/dialogTypes'
// ** MUI Imports
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import DialogContentText from '@mui/material/DialogContentText'

const DialogAlert = (props : DialogAlertType) => {
  // ** State
  const { title, messageContent, showBtnClose = true, showBtnConfirm = true, textBtnClose="キャンセル", textBtnConfirm='OK' } = props
  const [open, setOpen] = useState<boolean>(false)

  const handleClickOpen = () => { setOpen(true) }

  const handleClose = () => { setOpen(false) }

  return (
    <Fragment>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby='alert-dialog-title'
        aria-describedby='alert-dialog-description'
        className='alert-dialog-custom'
      >
        <DialogTitle id='alert-dialog-title'>{ title }</DialogTitle>
        <DialogContent>
          <DialogContentText id='alert-dialog-description'>
            {messageContent}
          </DialogContentText>
        </DialogContent>
        <DialogActions className='dialog-actions-dense dialog-actions-center'>
          <Button color='secondary' variant='outlined' onClick={handleClose}>{ textBtnClose }</Button>
          <Button color='error' variant='contained' onClick={handleClose}>{ textBtnConfirm }</Button>
        </DialogActions>
      </Dialog>
    </Fragment>
  )
}

export default DialogAlert