import React, { useState } from 'react';
import i18n from 'ui-i18n';
import TextField from '@mui/material/TextField';
import Portal from '@mui/material/Portal';
import Snackbar from '@mui/material/Snackbar';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import { DropDownSelector } from '../../../DropDownSelector';
import { useWorkflowDefinitions } from '../hooks/useWorkflowDefinitions';
import { useWorkflowProcessInstance } from '../hooks/useWorkflowProcessInstance';
import { findWorkflowDefinitionByType } from '../helpers/common';
import { useStyles } from './styles';
export var AddWorkflowDialog = function (_a) {
    var anchorEl = _a.anchorEl, onClose = _a.onClose;
    var styles = useStyles();
    var _b = useState(''), comment = _b[0], setComment = _b[1];
    var _c = useState(null), taskType = _c[0], setTaskType = _c[1];
    var _d = useState(false), isOpenSnackbar = _d[0], setIsOpenSnackbar = _d[1];
    var _e = useWorkflowDefinitions(), definitions = _e.definitions, loadingDefinitions = _e.loading;
    var _f = useWorkflowProcessInstance(), processInstance = _f.processInstance, loading = _f.loading;
    var handleChangeComment = function (e) {
        setComment(e.target.value);
    };
    var handleChangeTaskType = function (value) {
        setTaskType(value);
    };
    var handleStart = function () {
        processInstance(comment, taskType === null || taskType === void 0 ? void 0 : taskType.value)
            .then(function () {
            setIsOpenSnackbar(true);
            setComment('');
            setTaskType(null);
            onClose();
        })
            .catch(function () { });
    };
    var handleCloseSnackbar = function () {
        setIsOpenSnackbar(false);
    };
    var open = Boolean(anchorEl);
    var currentDefinition = findWorkflowDefinitionByType(definitions, taskType === null || taskType === void 0 ? void 0 : taskType.value);
    var isCommentRequired = (currentDefinition === null || currentDefinition === void 0 ? void 0 : currentDefinition.requiresCommentOnStart) || false;
    var isStartButtonDisabled = loading || taskType === null || loadingDefinitions || (isCommentRequired && !comment);
    return (React.createElement(React.Fragment, null,
        React.createElement(Popover, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'right'
            }, transformOrigin: {
                vertical: 'top',
                horizontal: 'right'
            }, classes: {
                paper: styles.popoverPaper
            } },
            React.createElement("div", { className: styles.content },
                React.createElement(Typography, { className: styles.title }, i18n.text('Add new workflow')),
                React.createElement(DropDownSelector, { className: styles.simpleDropDownSelector, height: 44, value: taskType, onChange: handleChangeTaskType, label: i18n.text('Select task type'), options: definitions.map(function (definition) {
                        return {
                            value: definition.type,
                            label: definition.displayName
                        };
                    }) }),
                React.createElement(TextField, { variant: "filled", hiddenLabel: true, size: "small", minRows: 1, required: isCommentRequired, label: i18n.text('Type a comment'), InputProps: {
                        classes: {
                            input: styles.input,
                            root: styles.inputRoot
                        }
                    }, InputLabelProps: {
                        classes: {
                            root: styles.inputLabelRoot,
                            asterisk: styles.asterisk
                        }
                    }, value: comment, onChange: handleChangeComment, multiline: true })),
            React.createElement("div", { className: styles.footer },
                React.createElement(Button, { disabled: loading, className: styles.cancelButton, onClick: onClose }, i18n.text('Cancel')),
                React.createElement(Button, { disabled: isStartButtonDisabled, color: "primary", onClick: handleStart }, i18n.text('Start')))),
        React.createElement(Portal, { container: document.body },
            React.createElement(Snackbar, { open: isOpenSnackbar, autoHideDuration: 5000, onClose: handleCloseSnackbar, message: i18n.text('A new workflow has started'), anchorOrigin: { vertical: 'bottom', horizontal: 'center' } }))));
};
