"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
// Reimplement this component to use custom Select in case of using it along the MultiSelectField component due to visual differences.
// Idea: use Formik's field.multiple to switch among single and multi-selection.
// See: https://www.patternfly.org/v4/components/form-select/design-guidelines#usage
const SelectField = (_a) => {
    var { label, options, helperText, isRequired, onChange, getHelperText, idPostfix, labelIcon, callFormikOnChange = true } = _a, props = tslib_1.__rest(_a, ["label", "options", "helperText", "isRequired", "onChange", "getHelperText", "idPostfix", "labelIcon", "callFormikOnChange"]);
    const [field, { touched, error }] = (0, formik_1.useField)(props.name);
    const fieldId = (0, utils_1.getFieldId)(props.name, 'input', idPostfix);
    const isValid = !(touched && error);
    const errorMessage = !isValid ? error : '';
    const hText = getHelperText ? getHelperText(field.value) : helperText;
    return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelHelp: labelIcon, id: `form-control__${fieldId}` },
        React.createElement(react_core_1.FormSelect, Object.assign({}, field, props, { id: fieldId, validated: isValid ? 'default' : 'error', isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, onChange: (event, value) => {
                //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
                callFormikOnChange && field.onChange(event);
                onChange && onChange(event, value);
            } }), options.map((option, index) => (React.createElement(react_core_1.FormSelectOption, Object.assign({ key: option.id || index }, option))))),
        (errorMessage || hText) && (React.createElement(react_core_1.FormHelperText, null,
            React.createElement(react_core_1.HelperText, null,
                React.createElement(react_core_1.HelperTextItem, { icon: React.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`, "data-testid": `input-selectfield-${fieldId}-helper-text` }, errorMessage ? errorMessage : hText))))));
};
exports.default = SelectField;
//# sourceMappingURL=SelectField.js.map