"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const common_1 = require("../../../common");
const InfraEnvOpenShiftVersionDropdown = ({ osImages }) => {
    const { t } = (0, use_translation_wrapper_1.useTranslation)();
    const [{ name, value }, , { setValue }] = (0, formik_1.useField)('osImageVersion');
    const [{ value: cpuArchitecture }] = (0, formik_1.useField)('cpuArchitecture');
    const [osImageOpen, setOsImageOpen] = React.useState(false);
    const fieldId = (0, common_1.getFieldId)(name, 'input');
    const onOsImageSelect = (event, val) => {
        setValue(val ? String(val) : '');
        setOsImageOpen(false);
    };
    const filteredImages = React.useMemo(() => osImages.filter((image) => image.cpuArchitecture === cpuArchitecture), [osImages, cpuArchitecture]);
    React.useEffect(() => {
        if (filteredImages.length === 0 && value !== '') {
            setValue('');
        }
    }, [filteredImages.length, setValue, t, value]);
    return (React.createElement(react_core_1.FormGroup, { isInline: true, fieldId: fieldId, label: t('ai:OpenShift version') },
        React.createElement(react_core_1.Tooltip, { content: t('ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.', { cpuArchitecture: common_1.architectureData[cpuArchitecture].label }), hidden: !!filteredImages.length },
            React.createElement(react_core_1.Dropdown, { toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: () => setOsImageOpen(!osImageOpen), isExpanded: osImageOpen, isDisabled: !filteredImages.length }, value ? `OpenShift ${value}` : t('ai:No version selected'))), isOpen: osImageOpen, onSelect: onOsImageSelect, onOpenChange: () => setOsImageOpen(!osImageOpen) },
                React.createElement(react_core_1.DropdownList, null, filteredImages
                    .sort((a, b) => b.openshiftVersion.localeCompare(a.openshiftVersion))
                    .map((image) => (React.createElement(react_core_1.DropdownItem, { key: image.openshiftVersion, id: image.openshiftVersion, value: image.openshiftVersion }, `OpenShift ${image.openshiftVersion}`))))))));
};
exports.default = InfraEnvOpenShiftVersionDropdown;
//# sourceMappingURL=InfraEnvOpenShiftVersionDropdown.js.map