import React, { useCallback, useMemo } from 'react';
import { useAxiosGet } from '../../utilities/useAxiosGet';
import { Form, FormButtons, SubmitButton } from '../../utilities/form';
import { ParamsMappingFields } from './ParamsMappingFields';
import { ConfigService } from '../../configService';
export const ParamsMappingForm = (props) => {
    const { queryId, paramMappings, properties, onSubmit = () => { }, fieldWidth = 180, propertyLabel = 'Property' } = props;
    const [{ data: apiMethodInstance, loading: apiMethodInstancebLoading, error: apiMethodInstanceError }] = useAxiosGet(ConfigService.integrationV1ApiUrl, `apiMethodInstance/${queryId}`, {}, !!!queryId, false);
    const paramOptions = useMemo(() => {
        var _a;
        if (!apiMethodInstance) {
            return [];
        }
        try {
            const options = [];
            const bodyStr = apiMethodInstance.body;
            const body = JSON.parse(bodyStr);
            // Checks for any filter elements that have been configured with params.
            (_a = body === null || body === void 0 ? void 0 : body.filterElements) === null || _a === void 0 ? void 0 : _a.forEach((filter) => {
                if (filter.searchValue.startsWith('params.')) {
                    const key = filter === null || filter === void 0 ? void 0 : filter.searchValue.replace('params.', '');
                    options.push({ label: key, value: key });
                }
            });
            return options;
        }
        catch (_b) {
            console.warn('Error parsing apiMethodInstance body');
            return [];
        }
    }, [apiMethodInstance]);
    const propertyOptions = useMemo(() => {
        if (!properties) {
            return [];
        }
        return properties.filter((property) => (property === null || property === void 0 ? void 0 : property.type) !== 'array' && (property === null || property === void 0 ? void 0 : property.type) !== 'object');
    }, [properties]);
    //   const handleOnSubmit = useCallback(
    //     (values) => {
    //       // construct the mapping object from the values
    //       // the map would be [{parameter: params.apple, property: appleValue}]
    //       const paramMappings = [];
    //       const parameters = new Set();
    //       Object.keys(values).forEach((key) => {
    //         const parameter = key.split('-')[1];
    //         parameters.add(parameter);
    //       });
    //       parameters.forEach((parameter) => {
    //         // const parameter = values[`parameter-${parameter}`];
    //         const property = values[`property-${parameter}`];
    //         if (parameter) {
    //           //   const parameterValue = parameter.value;
    //           paramMappings.push({
    //             parameter: `params.${parameter}`,
    //             property: property?.name
    //           });
    //         }
    //       });
    //       onSubmit(paramMappings);
    //     },
    //     [onSubmit]
    //   );
    const handleOnSubmit = useCallback((values) => {
        // construct the mapping object from the values
        // the map would be {params.apple: appleValue}
        const paramMappings = {};
        const parameters = new Set();
        Object.keys(values).forEach((key) => {
            const parameter = key.split('-')[1];
            parameters.add(parameter);
        });
        parameters.forEach((parameter) => {
            const property = values[`property-${parameter}`];
            if (parameter && property) {
                const parameterValue = parameter;
                paramMappings[parameterValue] = property.name;
            }
        });
        onSubmit(paramMappings);
    }, [onSubmit]);
    return (React.createElement(Form, { onSubmit: handleOnSubmit }, React.createElement(ParamsMappingFields, { paramMappings: paramMappings, paramOptions: paramOptions, propertyOptions: propertyOptions, fieldWidth: fieldWidth, propertyLabel: propertyLabel }), React.createElement(FormButtons, null, React.createElement(SubmitButton, { variant: "contained", color: "primary", disablePristine: false, fullWidth: true, style: { marginRight: 8, marginLeft: 8 } }, "Save Mappin"))));
};
//# sourceMappingURL=ParamsMappingForm.js.map