import { jsxs, jsx } from 'react/jsx-runtime';
import Typography from '../Typography/Typography.js';
import Icon from '../Icon/Icon.js';
import classNames from '../../_virtual/index.js';
import { isTextTruncated, truncateText } from '../../utils/truncateText/truncateText.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';

const MachineInputField = ({ width = '100%', options = [], runCount = 0, className = '', contentReverse = false, onClick = () => { }, modalId = '', scriptType = '', readOnly = false, isMissing = false, }) => {
    const getIcon = {
        local: 'local',
        browserstack: 'browserstack_icon',
        saucelabs: 'sause_lab_icon',
        lambdatest: 'lambda_icon',
        fireflink: 'fireflink_platform_logo',
        mac: 'mac_icon',
        mac_icon: 'mac_icon',
        android: 'android_icon',
        linux: 'linux',
        'google chrome': 'chrome_icon',
        'mozilla firefox': 'fire_fox',
        'microsoft edge': 'edge',
        'internet explorer': 'internet_explorer',
        safari: 'safari_icon',
        opera: 'opera',
        windows: 'windows',
        edge: 'edge',
        firefox: 'fire_fox',
        chrome: 'chrome_icon',
        explorer: 'internet_explorer',
        ios: 'mac_icon',
        comet: 'comet_icon',
    };
    const isManualScript = scriptType.toLowerCase() === 'manual';
    return (jsxs("div", { id: modalId, style: { width: width }, className: classNames('ff-machine-input-field-wrapper', className, {
            'cursor-event-none': runCount !== 1 && scriptType == 'Automation',
        }), onClick: () => {
            if (readOnly)
                return;
            onClick();
        }, children: [!isManualScript && (jsxs(Typography, { as: "span", color: "var(--ff-machine-input-field-text-color)", fontSize: 8, textAlign: "center", className: "ff-machine-input-label", children: ["Run ", runCount] })), jsx("div", { className: classNames('ff-machine-input-field', {
                    'ff-machine-input-field-reverse': contentReverse,
                    'ff-machine-input-field-missing': isMissing,
                }), children: options.map(({ label, type, version }) => (jsxs("div", { className: classNames('ff-machine-icon-text-wrapper', {
                        'ff-machine-icon-text-wrapper-reverse': contentReverse,
                    }), children: [jsx(Icon, { name: getIcon[type?.toLowerCase()] || '', className: "ff-machine-icon" }), jsx(Tooltip, { title: label, children: jsx(Typography, { className: classNames('ff-machine-text', {
                                    'ff-machine-text-reverse': contentReverse,
                                }), color: "var(--ff-machine-input-field-text-color)", children: isTextTruncated(label, 10) ? truncateText(label, 10) : label }) }), isManualScript && !checkEmpty(version) && (jsx(Tooltip, { title: version, children: jsxs(Typography, { className: classNames('ff-machine-text', {
                                    'ff-machine-text-reverse': contentReverse,
                                }), color: "var(--ff-machine-input-field-text-color)", children: ["\u00A0-", ' ', isTextTruncated(version ?? '', 10)
                                        ? truncateText(version ?? '', 10)
                                        : version] }) }))] }, type))) })] }));
};
MachineInputField.displayName = 'MachineInputField';

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