"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormViewHostsFields = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const StaticIpHostsArray_1 = tslib_1.__importDefault(require("../StaticIpHostsArray"));
const common_1 = require("../../../../../../common");
const CollapsedHost_1 = tslib_1.__importDefault(require("../CollapsedHost"));
const protocolVersion_1 = require("../../data/protocolVersion");
const emptyData_1 = require("../../data/emptyData");
const OcmFormFields_1 = require("../../../../ui/OcmFormFields");
require("../staticIp.css");
const BondsSelect_1 = tslib_1.__importDefault(require("./BondsSelect"));
const BondsConfirmationModal_1 = tslib_1.__importDefault(require("./BondsConfirmationModal"));
const getExpandedHostComponent = (protocolType) => {
    const Component = ({ fieldName, hostIdx }) => {
        const [isModalOpen, setIsModalOpen] = react_1.default.useState(false);
        const { setFieldValue } = (0, formik_1.useFormikContext)();
        const [bondPrimaryField] = (0, formik_1.useField)(`${fieldName}.bondPrimaryInterface`);
        const [bondSecondaryField] = (0, formik_1.useField)(`${fieldName}.bondSecondaryInterface`);
        const [useBond] = (0, formik_1.useField)(`${fieldName}.useBond`);
        const handleUseBondChange = (checked) => {
            if (!checked) {
                if (bondPrimaryField.value || bondSecondaryField.value) {
                    setIsModalOpen(true);
                }
                else {
                    setFieldValue(`${fieldName}.useBond`, false);
                    setFieldValue(`${fieldName}.bondType`, 'active-backup');
                    setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
                    setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
                }
            }
        };
        const handleModalConfirm = () => {
            setFieldValue(`${fieldName}.useBond`, false);
            setFieldValue(`${fieldName}.bondType`, 'active-backup');
            setFieldValue(`${fieldName}.bondPrimaryInterface`, '');
            setFieldValue(`${fieldName}.bondSecondaryInterface`, '');
            setIsModalOpen(false);
        };
        const handleModalCancel = () => {
            setFieldValue(`${fieldName}.useBond`, true);
            setIsModalOpen(false);
        };
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(react_core_1.Grid, { hasGutter: true },
                react_1.default.createElement(react_core_1.FormGroup, null,
                    react_1.default.createElement(OcmFormFields_1.OcmCheckboxField, { label: react_1.default.createElement(react_1.default.Fragment, null,
                            'Use bond',
                            ' ',
                            react_1.default.createElement(common_1.PopoverIcon, { noVerticalAlign: true, bodyContent: "Bonds help you to combine network interfaces  for increased bandwidth and ensure redundancy. To bond more than 2 network interfaces per host, use the YAML view." })), onChange: (value) => handleUseBondChange(value), name: `${fieldName}.useBond`, "data-testid": `use-bond-${hostIdx}` })),
                useBond.value && (react_1.default.createElement(react_core_1.Grid, { hasGutter: true, className: "pf-v6-u-ml-lg" },
                    react_1.default.createElement(react_core_1.FormGroup, { fieldId: `bond-type-${hostIdx}` },
                        react_1.default.createElement(BondsSelect_1.default, { name: `${fieldName}.bondType`, "data-testid": `bond-type-${hostIdx}` })),
                    react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `${fieldName}.bondPrimaryInterface`, label: "Port 1 MAC Address", "data-testid": `bond-primary-interface-${hostIdx}`, isRequired: true }),
                    ' ',
                    react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `${fieldName}.bondSecondaryInterface`, label: "Port 2 MAC Address", "data-testid": `bond-secondary-interface-${hostIdx}`, isRequired: true }))),
                !useBond.value && (react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `${fieldName}.macAddress`, label: "MAC Address", isRequired: true, "data-testid": `mac-address-${hostIdx}` })),
                (0, protocolVersion_1.getShownProtocolVersions)(protocolType).map((protocolVersion) => (react_1.default.createElement(react_core_1.FormGroup, { label: `IP address (${(0, protocolVersion_1.getProtocolVersionLabel)(protocolVersion)})`, fieldId: (0, common_1.getFieldId)(`${fieldName}.ips.${protocolVersion}`, 'input'), key: protocolVersion },
                    react_1.default.createElement(OcmFormFields_1.OcmInputField, { name: `${fieldName}.ips.${protocolVersion}`, isRequired: true, "data-testid": `${protocolVersion}-address-${hostIdx}` }),
                    ' ')))),
            react_1.default.createElement(BondsConfirmationModal_1.default, { isOpen: isModalOpen, onConfirm: handleModalConfirm, onCancel: handleModalCancel })));
    };
    return Component;
};
const getCollapsedHostComponent = (protocolType) => {
    const Component = ({ fieldName, hostIdx }) => {
        const [{ value }, { error }] = (0, formik_1.useField)({
            name: fieldName,
        });
        const ipAddresses = (0, protocolVersion_1.getShownProtocolVersions)(protocolType).map((protocolVersion) => value.ips[protocolVersion]);
        const mapValue = ipAddresses.join(', ');
        return (react_1.default.createElement(CollapsedHost_1.default, { title: value.useBond ? 'Bonds to IP mapping' : 'MAC to IP mapping', numInterfaces: 1, macAddress: value.macAddress, mappingValue: mapValue, hostIdx: hostIdx, hasError: !!error, bondPrimaryInterface: value.bondPrimaryInterface, bondSecondaryInterface: value.bondSecondaryInterface }));
    };
    return Component;
};
const FormViewHostsFields = ({ protocolType, }) => {
    const emptyHost = (0, emptyData_1.getEmptyFormViewHost)();
    const CollapsedHostComponent = getCollapsedHostComponent(protocolType);
    const ExpandedHostComponent = getExpandedHostComponent(protocolType);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.h3 }, "Host specific configurations"),
        react_1.default.createElement(StaticIpHostsArray_1.default, { CollapsedHostComponent: CollapsedHostComponent, ExpandedHostComponent: ExpandedHostComponent, emptyHostData: emptyHost })));
};
exports.FormViewHostsFields = FormViewHostsFields;
//# sourceMappingURL=FormViewHostsFields.js.map