import React, { useCallback } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import Typography from '@mui/material/Typography';
import { useContextSelector } from '@fluentui/react-context-selector';
import { SmallIconButtonWithTooltip } from '../../../SmallIconButton';
import CloseIcon from '@mui/icons-material/Close';
import i18n from 'ui-i18n';
import { useWorkflowCheckPermission } from '../hooks/useWorkflowCheckPermission';
import { useWorkflowActions } from '../hooks/useWorkflowActions';
import { useMdmEntity } from '../../../contexts/MdmModuleContext';
import { ProfileBand } from '../../../ProfileBand';
import { DueDateField } from '../DueDateField';
import { PrioritySelector } from '../PrioritySelector';
import { AssigneeSelector } from '../AssigneeSelector';
import { WorkflowComments } from '../WorkflowComments';
import { WorkflowActionButtons } from '../WorkflowActionButtons';
import { DCRSummaryInfo } from './components/DCRSummaryInfo/DCRSummaryInfo';
import { ChangeRequestEditor } from '../ChangeRequestEditor';
import { useApplyDcrChanges } from '../hooks/useApplyDcrChanges';
import { DCRErrorsPanel } from './DCRErrorsPanel/DCRErrorsPanel';
import { AddedAttributesContext } from '../contexts/AddedAttributesContext';
import { ChangeRequestEditorContext } from '../contexts/ChangeRequestEditorContext';
import styles from './ReviewDCRDialog.module.css';
export var ReviewDCRDialog = function (_a) {
    var open = _a.open, onClose = _a.onClose, dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects, onReloadDcr = _a.onReloadDcr;
    var entity = useMdmEntity();
    var checkWorkflowPermission = useWorkflowCheckPermission();
    var canViewComments = checkWorkflowPermission('VIEW_PROCESS_INSTANCE_COMMENTS');
    var applyDcrChanges = useApplyDcrChanges(dcr);
    var resetAddedAttributes = useContextSelector(AddedAttributesContext, function (ctx) { return ctx.resetState; });
    var resetEditorState = useContextSelector(ChangeRequestEditorContext, function (ctx) { return ctx.resetState; });
    var handleError = useCallback(function () {
        resetAddedAttributes();
        resetEditorState();
        onReloadDcr === null || onReloadDcr === void 0 ? void 0 : onReloadDcr();
    }, [resetAddedAttributes, resetEditorState, onReloadDcr]);
    var _b = useWorkflowActions({
        task: {
            taskId: task.taskId,
            possibleActions: task.possibleActions,
            assignee: task.assignee,
            isOpen: task.isOpen
        },
        beforeAction: applyDcrChanges,
        onError: handleError
    }), workflowActions = _b.actions, actionRequestIsInProgress = _b.actionRequestIsInProgress;
    return (React.createElement(Dialog, { open: open, onClose: onClose, fullScreen: true },
        React.createElement(DialogTitle, { className: styles.dialogTitle },
            React.createElement("div", { className: styles.titleContent },
                React.createElement(Typography, { variant: "h6", className: styles.titleText }, i18n.text('Review DCR')),
                React.createElement(WorkflowActionButtons, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: task.preferredAction })),
            React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Close'), "aria-label": i18n.text('Close'), icon: CloseIcon, onClick: onClose, className: styles.closeButton, size: "L" })),
        React.createElement(DialogContent, { classes: { root: styles.content } },
            React.createElement("div", { className: styles.leftSection },
                React.createElement(ProfileBand, { entity: entity, className: styles.profileBandRoot, classes: { profileBand: styles.profileBand } }),
                React.createElement(DCRErrorsPanel, null),
                React.createElement(DCRSummaryInfo, { dcr: dcr, task: task, groupedObjects: groupedObjects }),
                React.createElement("div", { className: styles.editableSection },
                    React.createElement("div", { className: styles.editableGrid },
                        React.createElement("div", { className: styles.editableItem },
                            React.createElement(DueDateField, { taskId: task.taskId, dueDate: task.dueDate, isTaskOpen: task.isOpen })),
                        React.createElement("div", { className: styles.editableItem },
                            React.createElement(PrioritySelector, { taskId: task.taskId, priority: task.priority || 50, isTaskOpen: task.isOpen, className: styles.priorityField })),
                        React.createElement("div", { className: styles.editableItem },
                            React.createElement(AssigneeSelector, { taskId: task.taskId, assignee: task.assignee, isTaskOpen: task.isOpen })))),
                React.createElement("div", { className: styles.changesSection },
                    React.createElement(ChangeRequestEditor, { dcr: dcr, task: task, groupedObjects: groupedObjects }))),
            canViewComments && (React.createElement(WorkflowComments, { workflowActions: workflowActions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: task.preferredAction, taskId: task.taskId, processInstanceComments: task.processInstanceComments, isTaskOpen: task.isOpen, showActionButtons: false, alwaysExpanded: true, classes: {
                    container: styles.commentsRootContainer,
                    commentsContainer: styles.commentsContainer
                } })))));
};
