import React, { useCallback, useMemo, useRef } from 'react';
import { SideSheet } from '../../../../UI';
import { useTranslation } from 'react-i18next';
import UdpTransactionUiActionForm from '../forms/UdpTransactionUiActionForm';
const UdpTransactionUiActionCreateAndEditSidesheet = (props) => {
    const { initialTransactionUiAction, isSideSheetOpen, handleSideSheet, handleCreateTransactionUiAction, handleUpdateTransactionUiAction, transactionUiActionTypes, actionApis, pages, tUiActionsList } = props;
    const isEditing = !!initialTransactionUiAction;
    const formRef = useRef();
    const { t } = useTranslation();
    const normalizeToArray = source => {
        if (Array.isArray(source)) {
            return source;
        }
        return [];
    };
    const filterAvailableTUATypes = useCallback((allTUATypes, transactionUiActions, currentTransactionUiActionTypeId = null) => {
        const allTUATypesArray = normalizeToArray(allTUATypes);
        const transactionUiActionsArray = normalizeToArray(transactionUiActions === null || transactionUiActions === void 0 ? void 0 : transactionUiActions.pageList);
        if (!transactionUiActions)
            return allTUATypesArray;
        // Capture the IDs of TUATypes currently in use so we can eliminate them from the dropdown
        const usedTUATypeIds = transactionUiActionsArray
            .map(action => action.transactionUiActionTypeId)
            .filter(id => id !== undefined && id !== currentTransactionUiActionTypeId);
        return allTUATypesArray.filter(type => !usedTUATypeIds.includes(type.transactionUiActionTypeId));
    }, []);
    const availableTUATypeOptions = useMemo(() => {
        if (!transactionUiActionTypes)
            return [];
        // Get the ID of the TUAction being edited
        const currentTUATypeId = initialTransactionUiAction
            ? initialTransactionUiAction.transactionUiActionTypeId
            : null;
        return filterAvailableTUATypes(transactionUiActionTypes, tUiActionsList, currentTUATypeId);
    }, [transactionUiActionTypes, tUiActionsList, initialTransactionUiAction, filterAvailableTUATypes]);
    const onSubmitForm = useCallback(async (values, initialData) => {
        if (initialData) {
            await handleUpdateTransactionUiAction(values, initialData);
        }
        else {
            await handleCreateTransactionUiAction(values);
        }
    }, [handleCreateTransactionUiAction, handleUpdateTransactionUiAction]);
    return (React.createElement(SideSheet, { open: isSideSheetOpen, width: 600, title: isEditing ? t('Edit UI Action') : t('Create UI Action'), onClose: () => handleSideSheet(false), buttonLabel: isEditing ? t('Save') : t('Create'), onSubmit: () => {
            var _a;
            // eslint-disable-next-line no-unused-expressions
            (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
        } }, React.createElement(UdpTransactionUiActionForm, { ref: formRef, onSubmit: onSubmitForm, initialData: initialTransactionUiAction, transactionUiActionTypeOptions: availableTUATypeOptions, actionApiOptions: actionApis, pageOptions: pages })));
};
export default UdpTransactionUiActionCreateAndEditSidesheet;
//# sourceMappingURL=UdpTransactionUiActionCreateAndEditSidesheet.js.map