import React, { useCallback, useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import TextField from '@mui/material/TextField';
import i18n from 'ui-i18n';
import styles from './CommentDialog.module.css';
export var CommentDialog = function (_a) {
    var _b = _a.open, open = _b === void 0 ? true : _b, title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _c = _a.defaultComment, defaultComment = _c === void 0 ? '' : _c, _d = _a.required, required = _d === void 0 ? true : _d, onConfirm = _a.onConfirm, onCancel = _a.onCancel;
    var _e = useState(defaultComment || ''), comment = _e[0], setComment = _e[1];
    var handleChangeComment = useCallback(function (e) {
        setComment(e.target.value);
    }, []);
    var handleConfirm = useCallback(function () {
        if (required && !comment.trim())
            return;
        onConfirm(comment);
        setComment('');
    }, [comment, required, onConfirm]);
    var handleCancel = useCallback(function () {
        onCancel();
    }, [onCancel]);
    var isConfirmDisabled = required && !comment.trim();
    return (React.createElement(Dialog, { open: open, onClose: handleCancel, fullWidth: true, classes: { paper: styles.dialog } },
        React.createElement(DialogTitle, { classes: { root: styles.dialogTitle } }, title || i18n.text('Please provide a comment for your action')),
        React.createElement(DialogContent, { classes: { root: styles.dialogContent } },
            React.createElement(TextField, { autoFocus: true, multiline: true, minRows: 5, fullWidth: true, variant: "filled", value: comment, size: "small", onChange: handleChangeComment, required: required, InputLabelProps: {
                    classes: {
                        root: styles.inputLabelRoot,
                        asterisk: styles.asterisk
                    }
                }, InputProps: {
                    classes: {
                        input: styles.input,
                        formControl: styles.formControl
                    }
                }, label: i18n.text('Type a comment') })),
        React.createElement(DialogActions, { classes: { root: styles.dialogActions } },
            React.createElement(Button, { onClick: handleCancel }, cancelLabel || i18n.text('Cancel')),
            React.createElement(Button, { onClick: handleConfirm, disabled: isConfirmDisabled, color: "primary" }, confirmLabel || i18n.text('Done')))));
};
