import React, { useEffect } from 'react';
import { Field } from '../../../../utilities/form';
import { AmbientAutoComplete, FluentTextField } from '../../../../UI/inputs/textField';
import { FluentButton } from '../../../../UI/inputs/buttons';
import { FieldArray } from 'react-final-form-arrays';
import { StatusCircleErrorXIcon } from '@fluentui/react-icons';
import { useForm, useFormState } from 'react-final-form';
import { useTranslation } from 'react-i18next';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    domainFields: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
        '& > *': {
            marginRight: theme.spacing(2),
        },
    },
    addRemoveButtons: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        margin: `${theme.spacing(2)}px  0  0 ${-theme.spacing(2)}px`,
        '& > *': {
            margin: `0 ${theme.spacing(2)}px`,
        },
    },
    removeIcon: {
        fontSize: theme.spacing(3.5),
        marginTop: theme.spacing(1),
    },
    noRemoveIcon: {
        marginLeft: theme.spacing(3.5),
    },
}));
const UdpTransactionTypeTransactionActionFormFields = (props) => {
    const { transactionActionOptions, catalogObjectProperties, actionApiOptions, pageOptions, transactionTypeStatusOptions, showMandatoryFields, showHiddenFields, showToStatusField, showActionApiField, showPageField, showDomainDataToUpdateFields, pushToFieldArray } = props;
    const { t } = useTranslation();
    const classes = useStyles();
    const form = useForm();
    const { values } = useFormState();
    // Clear the fields when they are hidden
    useEffect(() => {
        if (!showMandatoryFields)
            form.change('mandatoryFields', []);
        if (!showHiddenFields)
            form.change('hiddenFields', []);
        if (!showToStatusField)
            form.change('toStatus', null);
        if (!showActionApiField)
            form.change('actionApiId', null);
        if (!showPageField)
            form.change('pageId', []);
        if (!showDomainDataToUpdateFields)
            form.change('domainDataToUpdate', [[]]);
    }, [
        form,
        showMandatoryFields,
        showHiddenFields,
        showToStatusField,
        showActionApiField,
        showPageField,
        showDomainDataToUpdateFields,
        values.transactionAction
    ]);
    return (React.createElement(React.Fragment, null, React.createElement(Field, { component: FluentTextField, label: t("Name"), id: "name", name: "name", fullWidth: true, variant: "outlined", margin: "normal", size: "small", required: true }), React.createElement(Field, { component: FluentTextField, label: t("Description"), id: "description", name: "description", fullWidth: true, variant: "outlined", margin: "normal", size: "small" }), React.createElement(Field, { component: FluentTextField, label: t("Icon"), id: "icon", name: "icon", fullWidth: true, variant: "outlined", margin: "normal", size: "small" }), React.createElement(Field, { component: AmbientAutoComplete, label: t("Transaction Action"), id: "transactionAction", name: "transactionAction", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: transactionActionOptions || [], getOptionLabelFunction: option => option.name, valueForChange: value => {
            return value;
        }, required: true }), showToStatusField &&
        React.createElement(Field, { component: AmbientAutoComplete, label: t("To Status"), id: "toStatus", name: "toStatus", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: transactionTypeStatusOptions || [], getOptionLabelFunction: option => option.name }), showMandatoryFields &&
        React.createElement(Field, { component: AmbientAutoComplete, label: t("Mandatory Fields"), id: "mandatoryFields", name: "mandatoryFields", variant: "outlined", isMultiple: true, disableCloseOnSelect: true, options: catalogObjectProperties || [], getOptionLabelFunction: option => option }), showHiddenFields &&
        React.createElement(Field, { component: AmbientAutoComplete, label: t("Hidden Fields"), id: "hiddenFields", name: "hiddenFields", variant: "outlined", isMultiple: true, disableCloseOnSelect: true, options: catalogObjectProperties || [], getOptionLabelFunction: option => option }), showActionApiField &&
        React.createElement(Field, { component: AmbientAutoComplete, label: t("Action Api"), id: "actionApiId", name: "actionApiId", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: actionApiOptions || [], getOptionLabelFunction: option => option.name }), showPageField &&
        React.createElement(Field, { component: AmbientAutoComplete, label: t("Page"), id: "pageId", name: "pageId", variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: pageOptions || [], getOptionLabelFunction: option => option.name }), showDomainDataToUpdateFields && (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.addRemoveButtons }, React.createElement(FluentButton, { variant: "contained", color: "primary", onClick: () => pushToFieldArray('domainDataToUpdate', undefined) }, t('Add a Domain Field'))), React.createElement(FieldArray, { name: "domainDataToUpdate" }, ({ fields }) => fields.map((name, index) => (React.createElement("div", { key: `${name}${index}`, className: classes.domainFields }, React.createElement(Field, { component: AmbientAutoComplete, label: index === 0 && t("Field"), name: `${name}[0]`, variant: "outlined", isMultiple: false, disableCloseOnSelect: false, options: catalogObjectProperties || [], getOptionLabelFunction: option => option, onChange: () => { } }), React.createElement(Field, { component: FluentTextField, label: index === 0 && t("Value"), name: `${name}[1]`, fullWidth: true, variant: "outlined", margin: "normal", size: "small", onChange: () => { } }), React.createElement("span", { onClick: () => fields.remove(index), style: { cursor: 'pointer' }, className: classes.removeIcon }, React.createElement(StatusCircleErrorXIcon, null))))))))));
};
export default UdpTransactionTypeTransactionActionFormFields;
//# sourceMappingURL=UdpTransactionTypeTransactionActionFormFields.js.map