"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.YamlViewFields = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const external_link_alt_icon_1 = require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon");
const react_code_editor_1 = require("@patternfly/react-code-editor");
const formik_1 = require("formik");
const common_1 = require("../../../../../../common");
const StaticIpHostsArray_1 = tslib_1.__importDefault(require("../StaticIpHostsArray"));
const CollapsedHost_1 = tslib_1.__importDefault(require("../CollapsedHost"));
const MacIpMapping_1 = require("./MacIpMapping");
const emptyData_1 = require("../../data/emptyData");
const OcmFormFields_1 = require("../../../../ui/OcmFormFields");
const CollapsedHost = ({ fieldName, hostIdx }) => {
    const mapFieldName = `${fieldName}.macInterfaceMap`;
    const [mapField, { error }] = (0, formik_1.useField)({
        name: mapFieldName,
    });
    const macInterfaceMap = mapField.value ? mapField.value : [];
    let hasError = !!error;
    let macAddress = '';
    let mapValue = '';
    if (!macInterfaceMap.length) {
        hasError = true;
    }
    else {
        macAddress = macInterfaceMap[0].macAddress || '';
        mapValue = macInterfaceMap[0].logicalNicName || '';
    }
    return (react_1.default.createElement(CollapsedHost_1.default, { title: "MAC to Interface name mapping", numInterfaces: macInterfaceMap.length, macAddress: macAddress, mappingValue: mapValue, hostIdx: hostIdx, hasError: hasError, bondPrimaryInterface: "", bondSecondaryInterface: "" }));
};
const ExpandedHost = ({ fieldName, hostIdx }) => {
    const mapFieldName = `${fieldName}.macInterfaceMap`;
    const [mapField] = (0, formik_1.useField)({
        name: mapFieldName,
    });
    const macInterfaceMap = mapField.value ? mapField.value : [];
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(react_core_1.FormGroup, { label: "", fieldId: (0, common_1.getFieldId)('nmstateYaml', 'inputs') },
            react_1.default.createElement(OcmFormFields_1.OcmCodeField, { language: react_code_editor_1.Language.yaml, name: `${fieldName}.networkYaml`, "data-testid": `yaml-${hostIdx}` })),
        react_1.default.createElement(react_core_1.FormGroup, { label: react_1.default.createElement(react_1.default.Fragment, null,
                "MAC to interface name mapping",
                ' ',
                react_1.default.createElement(common_1.PopoverIcon, { bodyContent: 'MAC address and interface name are needed in order to execute the above nmstate YAML on the right machine.' })), fieldId: (0, common_1.getFieldId)('macNicMaping', 'inputs') },
            react_1.default.createElement(MacIpMapping_1.MacIpMapping, { fieldName: mapFieldName, macInterfaceMap: macInterfaceMap, hostIdx: hostIdx }))));
};
const YamlViewFields = () => {
    const emptyHostData = (0, emptyData_1.getEmptyYamlHost)();
    return (react_1.default.createElement(react_core_1.Grid, { hasGutter: true },
        react_1.default.createElement(react_core_1.Content, { component: react_core_1.ContentVariants.small },
            "Upload, drag and drop, or copy and paste a YAML file that contains NMState into the editor for network configurations. Each host also needs the MAC to interface name mapping.",
            ' ',
            react_1.default.createElement("a", { href: common_1.NMSTATE_EXAMPLES_LINK, target: "_blank", rel: "noopener noreferrer" },
                "Learn more about NMState ",
                react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null))),
        react_1.default.createElement(StaticIpHostsArray_1.default, { ExpandedHostComponent: ExpandedHost, CollapsedHostComponent: CollapsedHost, emptyHostData: emptyHostData, enableCopyAboveConfiguration: true })));
};
exports.YamlViewFields = YamlViewFields;
//# sourceMappingURL=YamlViewFields.js.map