import React, { forwardRef, useCallback, useState } from 'react';
import { LinearProgress } from '../../../../../UI';
import { Form, Field } from '../../../../../utilities/form';
import { FluentTextField } from '../../../../../UI/inputs/textField/FluentTextField';
import { FluentTextFieldAutoComplete } from '../../../../../UI/inputs/textField/FluentTextFieldAutoComplete';
import { Typography } from '../../../../../UI/dataDisplay/typography';
import { apiMutate } from '../../../../../utilities/useAxiosMutate';
import { ConfigService } from '../../../../../configService';
import { useAuthedUser } from '../../../../../utilities/auth';
import { useHandleAxiosSnackbar } from '../../../../../utilities';
import { useTranslation } from 'react-i18next';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    loading: {
        marginBottom: theme.spacing(1)
    }
}));
const TransactionNoteFormComponent = (props, ref) => {
    const { initialValues, viewOnly, businessObjectKey, closeSideSheet, noteTypes, fetchNoteTypesLoading } = props;
    const [isLoading, setIsLoading] = useState(false);
    const user = useAuthedUser();
    const { handleSuccessSnackbar, handleErrorSnackbar } = useHandleAxiosSnackbar();
    const { t } = useTranslation();
    const classes = useStyles();
    // TODO: create a new api to include both
    const addTransactionNote = useCallback(async (data) => apiMutate(ConfigService.productV1ApiUrl, `UdpNote`, {
        method: 'post'
    }, data), []);
    const addNoteFiledFor = useCallback(async (data) => apiMutate(ConfigService.productV1ApiUrl, `UdpNoteFiledFor`, {
        method: 'post'
    }, data), []);
    const handleSubmitForm = useCallback(async (values) => {
        var _a;
        var _b;
        setIsLoading(true);
        const formattedValues = {
            typeCode: (_a = values === null || values === void 0 ? void 0 : values.noteType) === null || _a === void 0 ? void 0 : _a.code,
            subject: values === null || values === void 0 ? void 0 : values.subject,
            content: values === null || values === void 0 ? void 0 : values.content,
            unityUserID: user === null || user === void 0 ? void 0 : user.id,
            userDisplayName: (_b = user === null || user === void 0 ? void 0 : user.name) !== null && _b !== void 0 ? _b : ''
        };
        await addTransactionNote({
            data: formattedValues
        })
            .then(async (res) => {
            var _a, _b;
            console.log('Transaction Note response: ', { res });
            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.id) {
                await addNoteFiledFor({
                    data: {
                        entityBusinessKey: businessObjectKey,
                        noteId: (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.id
                    }
                }).then(() => {
                    handleSuccessSnackbar(t('Transaction note has been added successfully.'));
                    if (closeSideSheet) {
                        closeSideSheet();
                    }
                });
            }
        })
            .catch((res) => {
            handleErrorSnackbar(res, t('Unable to add transaction note.'));
        });
        setIsLoading(false);
    }, [
        addNoteFiledFor,
        addTransactionNote,
        businessObjectKey,
        handleErrorSnackbar,
        handleSuccessSnackbar,
        t,
        user,
        closeSideSheet
    ]);
    return (React.createElement("div", null, fetchNoteTypesLoading ? (React.createElement("div", null, React.createElement(LinearProgress, null))) : (React.createElement("div", null, isLoading && (React.createElement("div", { className: classes.loading }, React.createElement(LinearProgress, null))), React.createElement(Form, { ref: ref, onSubmit: handleSubmitForm, initialValues: initialValues, id: `transactionNoteForm-${businessObjectKey}`, render: ({ submitting }) => (React.createElement(React.Fragment, null, React.createElement(Field, { component: FluentTextFieldAutoComplete, id: "noteType", name: "noteType", optionKey: "name", disableClearable: true, label: t('Type'), options: noteTypes !== null && noteTypes !== void 0 ? noteTypes : [], disabled: viewOnly || submitting, onChange: () => { }, required: true }), React.createElement(Field, { component: FluentTextField, id: "subject", name: "subject", label: t('Subject'), disabled: viewOnly || submitting, onChange: () => { }, required: true }), React.createElement(Field, { component: FluentTextField, id: "content", name: "content", label: t('Details'), onChange: () => { }, multiline: true, rows: 5, maxRows: 10, disabled: viewOnly || submitting, required: true }), viewOnly && (React.createElement(Typography, { variant: "caption" }, t('Viewing note details. Use the Add Note action to create a new entry.'))))) })))));
};
export const TransactionNoteForm = forwardRef(TransactionNoteFormComponent);
//# sourceMappingURL=TransactionNoteForm.js.map