"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RemoveItemButton = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_redux_1 = require("react-redux");
const react_core_1 = require("@patternfly/react-core");
const minus_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/minus-circle-icon");
const formik_1 = require("formik");
const cloneDeep_js_1 = tslib_1.__importDefault(require("lodash-es/cloneDeep.js"));
const common_1 = require("../../../../../common");
const ConfirmationModal_1 = tslib_1.__importDefault(require("../../../../../common/components/ui/ConfirmationModal"));
const selectors_1 = require("../../../../store/slices/current-cluster/selectors");
const fieldName = 'hosts';
const RemoveItemButton = ({ onRemove, showRemoveButton, dataTestId }) => (
//use css visibility instead of conditional rendering to avoid button jumping when hovering
react_1.default.createElement(react_core_1.Button, { icon: react_1.default.createElement(minus_circle_icon_1.MinusCircleIcon, { onClick: onRemove, "data-testid": dataTestId }), "aria-label": "remove host", style: { visibility: showRemoveButton ? 'visible' : 'hidden' }, variant: "plain" }));
exports.RemoveItemButton = RemoveItemButton;
const getHostName = (hostIdx) => `Host ${hostIdx + 1}`;
const SingleHost = ({ fieldName, hostIdx, onRemove, onToggleExpand, isExpanded, isDisabled, CollapsedHostComponent, ExpandedHostComponent, enableRemoveHost, }) => {
    //TODO: fix RemovableField reusable component to support this use case
    const [showRemoveButton, setShowRemoveButton] = react_1.default.useState(false);
    const updateShowRemoveButton = (value) => {
        if (isDisabled) {
            return;
        }
        if (!enableRemoveHost) {
            setShowRemoveButton(false);
        }
        else {
            setShowRemoveButton(value);
        }
    };
    const hostFieldName = (0, common_1.getFormikArrayItemFieldName)(fieldName, hostIdx);
    return (react_1.default.createElement(react_core_1.Grid, { onMouseEnter: () => updateShowRemoveButton(true), onMouseLeave: () => updateShowRemoveButton(false), hasGutter: true },
        react_1.default.createElement(react_core_1.Flex, null,
            react_1.default.createElement(react_core_1.FlexItem, null,
                react_1.default.createElement(react_core_1.ExpandableSectionToggle, { isExpanded: isExpanded, onToggle: onToggleExpand, direction: "down", "data-testid": `toggle-host-${hostIdx}` }, getHostName(hostIdx))),
            !isDisabled && enableRemoveHost && (react_1.default.createElement(react_core_1.FlexItem, { align: { default: 'alignRight' } },
                react_1.default.createElement(exports.RemoveItemButton, { onRemove: onRemove, showRemoveButton: showRemoveButton, dataTestId: `remove-host-${hostIdx}` })))),
        isExpanded ? (react_1.default.createElement(react_core_1.ExpandableSection, { isDetached: true, key: hostIdx, isExpanded: true },
            react_1.default.createElement(ExpandedHostComponent, { fieldName: hostFieldName, hostIdx: hostIdx, isDisabled: isDisabled }))) : (react_1.default.createElement(CollapsedHostComponent, { fieldName: hostFieldName, hostIdx: hostIdx, isDisabled: isDisabled }))));
};
const getExpandedHostsInitialValue = (numHosts) => {
    const ret = {};
    for (let i = 0; i < numHosts; ++i) {
        ret[i] = false;
    }
    return ret;
};
const getExpandedHostsDefaultValue = (numHosts) => {
    const ret = getExpandedHostsInitialValue(numHosts);
    if (numHosts === 1) {
        ret[0] = true;
    }
    return ret;
};
const Hosts = (_a) => {
    var { push, remove, enableCopyAboveConfiguration = false, emptyHostData } = _a, props = tslib_1.__rest(_a, ["push", "remove", "enableCopyAboveConfiguration", "emptyHostData"]);
    const [field, { error }] = (0, formik_1.useField)({
        name: fieldName,
    });
    const { isViewerMode } = (0, react_redux_1.useSelector)(selectors_1.selectCurrentClusterPermissionsState);
    const canAddHosts = !(0, react_redux_1.useSelector)(selectors_1.selectIsCurrentClusterSNO) && !isViewerMode;
    const [expandedHosts, setExpandedHosts] = react_1.default.useState(getExpandedHostsDefaultValue(field.value.length));
    const [copyConfiguration, setCopyConfiguration] = react_1.default.useState(enableCopyAboveConfiguration);
    const [hostIdxToRemove, setHostIdxToRemove] = react_1.default.useState(null);
    if (field.value === undefined) {
        return react_1.default.createElement(common_1.LoadingState, null);
    }
    const onAddHost = () => {
        const newHostData = (0, cloneDeep_js_1.default)(emptyHostData);
        if (copyConfiguration) {
            newHostData.networkYaml = (0, cloneDeep_js_1.default)(field.value[field.value.length - 1].networkYaml);
        }
        const newExpandedHosts = getExpandedHostsInitialValue(field.value.length + 1);
        newExpandedHosts[field.value.length] = true;
        setExpandedHosts(newExpandedHosts);
        push(newHostData);
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        field.value.map((_data, hostIdx) => {
            const onToggleExpand = (isExpanded) => {
                const newExpandedHosts = (0, cloneDeep_js_1.default)(expandedHosts);
                newExpandedHosts[hostIdx] = isExpanded;
                setExpandedHosts(newExpandedHosts);
            };
            return (react_1.default.createElement(react_1.default.Fragment, { key: hostIdx },
                react_1.default.createElement(SingleHost, Object.assign({ hostIdx: hostIdx, onToggleExpand: onToggleExpand, isExpanded: expandedHosts[hostIdx], isDisabled: isViewerMode, onRemove: () => setHostIdxToRemove(hostIdx), fieldName: fieldName, emptyHostData: emptyHostData, enableRemoveHost: field.value.length > 1 }, props)),
                react_1.default.createElement(react_core_1.Divider, null)));
        }),
        canAddHosts && (react_1.default.createElement(react_core_1.Flex, null,
            react_1.default.createElement(react_core_1.FlexItem, null,
                react_1.default.createElement(react_core_1.Button, { variant: "secondary", onClick: onAddHost, "data-testid": "add-host", isDisabled: !!error }, "Add another host configuration")),
            enableCopyAboveConfiguration && (react_1.default.createElement(react_core_1.FlexItem, { alignSelf: { default: 'alignSelfCenter' } },
                react_1.default.createElement(react_core_1.Checkbox, { label: "Copy the YAML content", isChecked: copyConfiguration, onChange: (_event, val) => setCopyConfiguration(val), "aria-label": "copy host configuration", name: "copy-host-configuration", id: "copy-host-configuration", "data-testid": "copy-host-configuration" }))))),
        hostIdxToRemove !== null && (react_1.default.createElement(ConfirmationModal_1.default, { title: `Delete ${getHostName(hostIdxToRemove)}?`, titleIconVariant: "warning", confirmationButtonText: "Delete", confirmationButtonVariant: react_core_1.ButtonVariant.danger, content: react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement("p", null, `All the network configurations of ${getHostName(hostIdxToRemove)} will be lost`)), onClose: () => setHostIdxToRemove(null), onConfirm: () => {
                remove(hostIdxToRemove);
                setHostIdxToRemove(null);
            } }))));
};
const StaticIpHostsArray = (_a) => {
    var props = tslib_1.__rest(_a, []);
    const renderHosts = react_1.default.useCallback((arrayRenderProps) => (react_1.default.createElement(Hosts, Object.assign({}, Object.assign(props, arrayRenderProps)))), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    return react_1.default.createElement(formik_1.FieldArray, { name: fieldName, render: renderHosts });
};
exports.default = StaticIpHostsArray;
//# sourceMappingURL=StaticIpHostsArray.js.map