import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import './MachineInputField.scss';
import Typography from '../Typography';
import Icon from '../Icon';
import classNames from 'classnames';
import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
import Tooltip from '../Tooltip';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
const MachineInputField = ({ width = '100%', options = [], runCount = 0, className = '', contentReverse = false, onClick = () => { }, modalId = '', scriptType = '', readOnly = false, }) => {
    const getIcon = {
        local: 'local',
        browserstack: 'browserstack_icon',
        saucelabs: 'sause_lab',
        lambdatest: 'lambda_icon',
        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',
    };
    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,
                }), children: options.map(({ label, type = 'local', version }) => (_jsxs("div", { className: classNames('ff-machine-icon-text-wrapper', {
                        'ff-machine-icon-text-wrapper-reverse': contentReverse,
                    }), children: [_jsx(Icon, { name: getIcon[type?.toLowerCase()] || 'local', 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: [' ', "-", ' ', isTextTruncated(version ?? '', 10)
                                        ? truncateText(version ?? '', 10)
                                        : version] }) }))] }, type))) })] }));
};
MachineInputField.displayName = 'MachineInputField';
export default MachineInputField;
//# sourceMappingURL=MachineInputField.js.map