import React, { useCallback, useState } from 'react';
import { makeStyles, TextField } from '@material-ui/core';
import { FluentTextFieldAutoComplete } from '../../UI/inputs/textField/FluentTextFieldAutoComplete';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { useTranslation } from 'react-i18next';
import { DropdownIcon, TextFieldIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        alignItems: 'center'
    },
    requiredFieldContainer: {
        width: '100%',
        display: 'flex',
        alignItems: 'center'
    },
    input: {
        height: 34,
        padding: 0
    },
    formTextInput: {
        fontSize: 14
    },
    labelRoot: {
        fontSize: 14
    }
}));
export const RequiredFieldsMappingField = (props) => {
    const { requiredField, onRequiredFieldChange, options, optionLabelDisplayFunction, groupBy } = props;
    const [state, setState] = useState(requiredField);
    const [isTextField, setIsTextField] = useState(!!!requiredField.propertyValue);
    const classes = useStyles(props);
    const { t } = useTranslation();
    const handleStateChange = useCallback((key, value, merge = false) => {
        let updatedState = Object.assign({}, state);
        if (merge) {
            updatedState = Object.assign(Object.assign({}, updatedState), value);
        }
        else {
            updatedState[key] = value;
        }
        setState(updatedState);
    }, [state]);
    // Having a separate handler for onChange and blur for text fields because
    // there is a lag between typing and rendering
    const handleInputChange = useCallback((evt) => {
        handleStateChange(evt.target.name, evt.target.value);
    }, [handleStateChange]);
    // Using a handler for blur because we want add the text input to the list of requiredFields
    // after user has finished typing
    const handleOnBlur = useCallback((evt) => {
        if (evt.target.name === 'strValue' && !!evt.target.value) {
            onRequiredFieldChange(requiredField.id, { propertyValue: '', strValue: evt.target.value }, 'strValue', true);
            handleStateChange('propertyValue', { propertyValue: '', strValue: evt.target.value }, true);
        }
        else {
            onRequiredFieldChange(requiredField.id, evt.target.value, evt.target.name);
        }
    }, [requiredField, onRequiredFieldChange, handleStateChange]);
    const handleRequiredFieldChange = useCallback((value) => {
        onRequiredFieldChange(requiredField.id, { propertyValue: value, strValue: '' }, 'propertyValue', true);
        handleStateChange('propertyValue', { propertyValue: value, strValue: '' }, true);
    }, [requiredField, onRequiredFieldChange, handleStateChange]);
    const handleButtonClick = useCallback(() => {
        setIsTextField(!isTextField);
    }, [isTextField]);
    let field = null;
    if (isTextField) {
        field = (React.createElement("div", { style: { width: '100%' } }, React.createElement(TextField, { name: "strValue", id: "strValue", onChange: handleInputChange, onBlur: handleOnBlur, label: t('Value'), value: (state === null || state === void 0 ? void 0 : state.strValue) || '', fullWidth: true, variant: "outlined", margin: "dense", size: "small", style: { width: 200 }, InputProps: {
                classes: {
                    root: classes.input,
                    input: classes.formTextInput
                }
            }, InputLabelProps: {
                classes: {
                    root: classes.labelRoot
                }
            } })));
    }
    else {
        field = (React.createElement("div", { style: { width: '100%' } }, React.createElement(FluentTextFieldAutoComplete, { name: "propertyValue", id: "propertyValue", label: t('Value'), onChange: handleRequiredFieldChange, optionLabelDisplayFunction: optionLabelDisplayFunction, value: (state === null || state === void 0 ? void 0 : state.propertyValue) || '', options: options || [], optionKey: optionLabelDisplayFunction ? '' : 'name', groupBy: groupBy, variant: "outlined", margin: "dense", style: { width: 200 } })));
    }
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.requiredFieldContainer }, field, React.createElement(FluentIconButton, { className: classes.icon, icon: isTextField ? DropdownIcon : TextFieldIcon, onClick: handleButtonClick }))));
};
//# sourceMappingURL=RequiredFieldsMappingField.js.map