import React from 'react';
import { Field } from '../../utilities/form';
import { FluentTextFieldAutoComplete } from '../../UI/inputs/textField/FluentTextFieldAutoComplete';
import { useTranslation } from 'react-i18next';
import { makeStyles, Typography } from '@material-ui/core';
import { FluentIcon } from '../../utilities/iconLibrary/FluentIcon';
import { ChromeBackMirroredIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {},
    row: {
        display: 'flex',
        alignItems: 'center'
    },
    iconContainer: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1)
    }
}));
export const ParamsMappingFields = (props) => {
    const { paramMappings, paramOptions, propertyOptions, fieldWidth, propertyLabel } = props;
    const classes = useStyles();
    const { t } = useTranslation();
    return paramOptions.map((item) => {
        let initialPropertyValue = '';
        const matchingMappingName = paramMappings === null || paramMappings === void 0 ? void 0 : paramMappings[item.value];
        if (matchingMappingName) {
            initialPropertyValue = propertyOptions.find((property) => property.name === matchingMappingName);
        }
        return (React.createElement("div", { className: classes.row }, React.createElement(Field, { component: FluentTextFieldAutoComplete, label: t(propertyLabel), name: `property-${item.label}`, id: `property-${item.label}`, fullWidth: true, variant: "outlined", margin: "dense", size: "small", options: propertyOptions || [], optionKey: 'name', style: { width: fieldWidth }, initialValue: initialPropertyValue }), React.createElement("div", { className: classes.iconContainer }, React.createElement(FluentIcon, { component: ChromeBackMirroredIcon, size: 20, customSize: true })), React.createElement(Typography, { variant: "subtitle1", style: { textOverflow: 'ellipsis', overflow: 'hidden' } }, item.label)));
    });
};
//# sourceMappingURL=ParamsMappingFields.js.map