import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import classNames from '../../_virtual/index.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import Button from '../Button/Button.js';
import Icon from '../Icon/Icon.js';
import Select from '../Select/Select.js';
import Typography from '../Typography/Typography.js';
import { useState, useRef, useEffect } from 'react';
import ConnectingBranches from './components/ConnectingBranches/ConnectingBranches.js';
import Tooltip from '../Tooltip/Tooltip.js';
import DataSetTooltip from './components/DatasetTooltip/DataSetTooltip.js';
import { EnvironmentVariableMapsContext } from './context/EnvironmentVariableMapsContext.js';

const SequentialConnectingBranch = ({ machineInstances = [], machineColumnWidth = 180, machineColumnCount = 1, selectedMachine = {}, machineOptionsList = [], onHandleSelect = () => { }, onAddBrowserInstance = () => { }, onAddRunBrowserInstance = () => { }, onDeleteBrowserInstance = () => { }, onUpdateDataSetList = () => { }, onDeleteMachineInstance = () => { }, dataSetValues = {
    testDataSetId: '',
    globalVariableSetId: '',
    peVariableSetId: '',
    globalVariableSetName: '',
    peVariableSetName: '',
    testDataSetName: '',
}, onUpdateAddBrowserInstance = () => { }, addInstanceLabel = 'Environment', placeholder = 'Choose Machine', scriptType = 'Automation', projectType = 'Web', readOnly = false, zIndex = 99999, maxRunCount = 35, environmentVariableMaps, isRequired = false, }) => {
    const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
    const selectButtonRef = useRef(null);
    const defaultMachineColumnCount = Math.max(machineColumnCount, 1);
    const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
    const [machineBranchInstances, setMachineBranchInstances] = useState([]);
    const isMachineInstances = checkEmpty(machineInstances);
    let isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
    if (scriptType === 'Manual') {
        isMachineSelected = checkEmpty(selectedMachine.value);
    }
    const getMachineStatusColor = (machineStatus = '') => {
        if (machineStatus.toLowerCase().includes('inactive'))
            return 'var(--ff-machine-inactive-status-color)';
        if (machineStatus.toLowerCase().includes('running'))
            return 'var(--ff-machine-running-status-color)';
        if (machineStatus.toLowerCase().includes('active'))
            return 'var(--ff-machine-active-status-color)';
        return 'var(--ff-machine-active-status-color))';
    };
    useEffect(() => {
        setSelectedMachineInstance(selectedMachine);
    }, [selectedMachine]);
    useEffect(() => {
        if (readOnly) {
            setMachineBranchInstances(machineInstances);
        }
        else {
            setMachineBranchInstances([...machineInstances, {}]);
        }
    }, [machineInstances]);
    const hideDataSet = scriptType.toLowerCase() !== 'manual';
    const removeKeysContainingSubstring = (obj, substring) => {
        return Object.fromEntries(Object.entries(obj).filter(([key]) => !key.includes(substring)));
    };
    const filteredDataSetValues = removeKeysContainingSubstring(dataSetValues, 'Id');
    const showBranchPoint = (readOnly && !isMachineInstances) ||
        (!readOnly && isMachineInstances) ||
        (!readOnly && !isMachineInstances);
    return (jsx(EnvironmentVariableMapsContext.Provider, { value: environmentVariableMaps, children: jsxs("div", { className: "ff-sequential-connecting-branch-wrapper", children: [jsxs("div", { className: "ff-connecting-select-branch-wrapper", children: [jsxs("div", { className: "ff-select-branch-wrapper", children: [jsx(Select, { onChange: onHandleSelect, optionsList: machineOptionsList, label: placeholder, required: isRequired, showLabel: true, className: "ff-sequential-select-branch", width: '240px', selectedOption: selectedMachineInstance, valueAccessor: 'name', optionsRequired: !readOnly, disableInput: readOnly, optionZIndex: zIndex }), !isMachineSelected && (jsxs("div", { className: classNames({
                                        'ff-select-branch-arrow': isMachineInstances,
                                        'ff-select-branch-arrow-down': !isMachineInstances,
                                    }), children: [showBranchPoint && (jsx("div", { className: "ff-select-branch-point" })), jsxs("div", { className: "ff-select-branch-arrow", children: [!readOnly && (jsx("div", { className: "ff-branch-arrow-wrapper", children: isMachineInstances && (jsx("div", { className: "ff-branch-arrow" })) })), isMachineInstances && !readOnly && (jsx(Fragment, { children: jsx(Button, { variant: "tertiary", label: scriptType === 'Manual'
                                                            ? 'Machine'
                                                            : 'Environment', iconName: 'plus_icon', iconPosition: 'left', size: "small", className: "branch-button", ref: selectButtonRef, onClick: () => onAddBrowserInstance('ff-sequential-branch-button'), id: "ff-sequential-branch-button" }) }))] })] }))] }), !isMachineSelected && (jsxs("div", { className: "ff-select-scope-datalist", children: [jsx("div", { className: "ff-scope-wrapper", children: jsx(Typography, { as: "span", color: getMachineStatusColor(selectedMachine.value?.status), className: "ff-scope-text", children: selectedMachine.value?.status }) }), jsxs("div", { className: "ff-datalist-wrapper", children: [hideDataSet && (jsx("div", { id: "ff-sequential-machine-datalist", onClick: () => {
                                                if (readOnly)
                                                    return;
                                                onUpdateDataSetList('ff-sequential-machine-datalist', dataSetValues);
                                            }, children: jsxs(Tooltip, { placement: "bottom", title: jsx("div", { children: jsx(DataSetTooltip, { datSetToolTip: filteredDataSetValues }) }), style: { display: 'flex', alignItems: 'center' }, children: [jsx(Icon, { name: "datalist_icon", className: "ff-dataset-icon", hoverEffect: true }), jsx(Typography, { as: "span", color: "var(--ff-connecting-branch-color)", className: "ff-datalist-text", children: "Data Set List" })] }) })), !readOnly && (jsx(Tooltip, { title: "Delete", placement: "bottom", children: jsx(Icon, { name: "delete", className: "ff-run-delete-icon", color: "var(--ff-connecting-branch-delete-color)", onClick: onDeleteMachineInstance, hoverEffect: true }) }))] })] }))] }), jsx("div", { className: "ff-sequential-branches-wrapper", children: !isMachineInstances && (jsx(ConnectingBranches, { machineBranchInstances: machineBranchInstances, machineColumnCount: defaultMachineColumnCount, machineColumnWidth: defaultMachineColumnWidth, onAddBrowser: onAddBrowserInstance, onDeleteBrowser: onDeleteBrowserInstance, onAddRunBrowser: onAddRunBrowserInstance, onUpdateDataSetList: onUpdateDataSetList, onUpdateAddBrowserInstance: onUpdateAddBrowserInstance, addInstanceLabel: addInstanceLabel, scriptType: scriptType, projectType: projectType, readOnly: readOnly, maxRunCount: maxRunCount })) })] }) }));
};

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