import React, { useState, useEffect, use } from 'react'
import {
    Button,
    FormControl,
    Grid,
    InputLabel,
    Select,
    TextField,
    Typography,
    DialogActions,
    Dialog,
    DialogContent,
    DialogContentText,
    DialogTitle,
    IconButton,
    Icon,
    Tooltip,
} from '@material-ui/core'
import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next'
import { hideLoading, showLoading } from 'app/redux/actions/loadingAction'
import { connect } from 'react-redux'

function FormDialog(props) {
    const { t } = useTranslation()

    const { open, handleClose, data, onAgree } = props

    const [name, setName] = useState()

    return (
        <Dialog
            open={open}
            onClose={handleClose}
            aria-labelledby="form-dialog-title"
        >
            <DialogTitle id="form-dialog-title">
                Không duyệt? Nhập lý do!
            </DialogTitle>
            <DialogContent>
                <TextField
                    style={{ marginBttom: 20, minWidth: 400 }}
                    variant="outlined"
                    autoFocus
                    margin="dense"
                    label="Nhập lý do không duyệt"
                    fullWidth
                    value={name || ''}
                    onChange={(event) => setName(event.target.value)}
                />
            </DialogContent>
            <DialogActions>
                <Button color="secondary" onClick={handleClose}>
                    Thoát
                </Button>
                <Button
                    onClick={() => {
                        onAgree(name)
                        setName('')
                    }}
                    color="primary"
                >
                    Đồng ý
                </Button>
            </DialogActions>
        </Dialog>
    )
}

const mapStateToProps = (state) => {
    return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
    FormDialog
)
