import { jsx, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { ffid } from '../../../../utils/ffID/ffid.js';
import Branches from '../Branches/Branches.js';

const ConnectingBranches = ({ machineBranchInstances, machineColumnCount, machineColumnWidth, onAddBrowser, onDeleteBrowser, onAddRunBrowser, onUpdateDataSetList, onUpdateAddBrowserInstance, addInstanceLabel = '', scriptType = '', projectType = 'Web', readOnly = false, maxRunCount, }) => {
    const [machineInstance, setMachineInstance] = useState(machineBranchInstances);
    useEffect(() => {
        setMachineInstance(machineBranchInstances);
    }, [machineBranchInstances]);
    const getMachineBranchInstancesChunk = (machineBranchInstances, chunkSize) => {
        const machineBranchInstancesChunk = [];
        for (let i = 0; i < machineBranchInstances.length; i += chunkSize) {
            machineBranchInstancesChunk.push(machineBranchInstances.slice(i, i + chunkSize));
        }
        return machineBranchInstancesChunk;
    };
    const machineInstancesRow = getMachineBranchInstancesChunk(machineInstance, machineColumnCount);
    return (jsx("div", { className: "ff-connecting-branch-grid-wrapper", children: machineInstancesRow.map((machineInstances, index) => (jsx(Fragment, { children: jsx(Branches, { machineInstances: machineInstances, rowIndex: index, machineColumnCount: machineColumnCount, machineColumnWidth: machineColumnWidth, onAddBrowser: onAddBrowser, onDeleteBrowser: onDeleteBrowser, onAddRunBrowser: onAddRunBrowser, nextRowMachineInstance: machineInstancesRow[index + 1]?.[0], previousRowMachineInstance: machineInstancesRow[index - 1]?.[machineColumnCount - 1], onUpdateDataSetList: onUpdateDataSetList, onUpdateAddBrowserInstance: onUpdateAddBrowserInstance, addInstanceLabel: addInstanceLabel, scriptType: scriptType, projectType: projectType, readOnly: readOnly, maxRunCount: maxRunCount }) }, ffid()))) }));
};

export { ConnectingBranches as default };
//# sourceMappingURL=ConnectingBranches.js.map
