import React, { useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { SideSheet } from '../../../../UI';
import UdpTransactionTypeConfigurationTransactionActionForm from '../forms/UdpTransactionTypeConfigurationTransactionActionForm';
const UdpTransactionTypeConfigurationTransactionActionCreateAndEditSidesheet = (props) => {
    const { initialTransactionTypeConfigurationTransactionAction, isSideSheetOpen, handleSideSheet, handleCreateTransactionTypeConfigurationTransactionAction, handleUpdateTransactionTypeConfigurationTransactionAction, transactionTypeTransactionActions, existingTtctaList } = props;
    const isEditing = !!initialTransactionTypeConfigurationTransactionAction;
    const formRef = useRef();
    const { t } = useTranslation();
    const normalizeToArray = source => {
        if (Array.isArray(source)) {
            return source;
        }
        return [];
    };
    const filterAvailableTTTActions = useCallback((allTTTActions, existingTTCTActions, currentTransactionTypeTransactionActionId = null) => {
        const allTTTActionsArray = normalizeToArray(allTTTActions);
        const existingTTCTActionsArray = normalizeToArray(existingTTCTActions === null || existingTTCTActions === void 0 ? void 0 : existingTTCTActions.pageList);
        // Capture the IDs of TTTActions currently in use so we can eliminate them from the dropdown
        const usedTTTActionIds = existingTTCTActionsArray
            .map(action => action.transactionTypeTransactionActionId)
            .filter(id => id !== undefined && id !== currentTransactionTypeTransactionActionId);
        return allTTTActionsArray.filter(type => !usedTTTActionIds.includes(type.transactionTypeTransactionActionId));
    }, []);
    const availableTTTActionOptions = useMemo(() => {
        if (!transactionTypeTransactionActions || !existingTtctaList)
            return [];
        // Get the ID of the TUAction being edited
        const currentTTTActionId = initialTransactionTypeConfigurationTransactionAction
            ? initialTransactionTypeConfigurationTransactionAction.transactionTypeTransactionActionId
            : null;
        return filterAvailableTTTActions(transactionTypeTransactionActions, existingTtctaList, currentTTTActionId);
    }, [transactionTypeTransactionActions, existingTtctaList, initialTransactionTypeConfigurationTransactionAction, filterAvailableTTTActions]);
    const onSubmitForm = useCallback(async (values, initialData) => {
        if (initialData) {
            await handleUpdateTransactionTypeConfigurationTransactionAction(values, initialData);
        }
        else {
            await handleCreateTransactionTypeConfigurationTransactionAction(values);
        }
    }, [
        handleCreateTransactionTypeConfigurationTransactionAction,
        handleUpdateTransactionTypeConfigurationTransactionAction
    ]);
    return (React.createElement(SideSheet, { open: isSideSheetOpen, width: 500, title: isEditing ? t('Edit Linked Action') : t('Create Linked 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(UdpTransactionTypeConfigurationTransactionActionForm, { ref: formRef, onSubmit: onSubmitForm, initialData: initialTransactionTypeConfigurationTransactionAction, transactionTypeTransactionActionOptions: availableTTTActionOptions, isEditing: isEditing })));
};
export default UdpTransactionTypeConfigurationTransactionActionCreateAndEditSidesheet;
//# sourceMappingURL=UdpTransactionTypeConfigurationTransactionActionCreateAndEditSidesheet.js.map