import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useEffect, useMemo, useState } from 'react';
import { nullTranslator } from '@jupyterlab/translation';
//import { kernelIcon } from '@jupyterlab/ui-components';
import { ActionList, ActionMenu, IconButton, Text, RadioGroup, Radio, FormControl, LabelGroup, Label, } from '@primer/react';
import CloudUploadIcon from '@datalayer/icons-react/data1/CloudUploadIcon';
import { Box } from '@datalayer/primer-addons';
import { CpuIcon } from '@primer/octicons-react';
import { BrowserIcon, LaptopSimpleIcon } from '@datalayer/icons-react';
import { CreditsIndicator } from '../../components/progress/index.js';
import { isRuntimeRemote } from '../../stateful/runtimes/index.js';
import { getGroupedRuntimeDescs } from './RuntimeUtils.js';
/**
 * Maximal runtime display name length after which it is trimmed.
 */
const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
/**
 * Base Kernel Picker component.
 */
export function RuntimePickerBase(props) {
    const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
    const [groupedRuntimeDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
    const [defaultSet, setDefaultSet] = useState(false);
    // Trick because overflow is an unknown prop of ActionMenu.Overlay.
    const overlayProps = {
        maxHeight: 'large',
        width: (variant === 'cell' ? 'small' : 'auto'),
    };
    /*
    // TODO this effect generates refresh of the react components which discards any change in the selection.
    useEffect(() => {
      const updateGroupedRuntimeDescs = () => {
        setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
      };
      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
      multiServiceManager.remote?.kernels.changed.connect(updateGroupedRuntimeDescs);
      multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
      // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
      return () => {
        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
        // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
      };
    }, [multiServiceManager, preference, translator, filterKernel, variant]);
    */
    useEffect(() => {
        if (sessionContext && groupedRuntimeDescs) {
            const kernelId = sessionContext.session?.kernel?.id;
            if (kernelId) {
                Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
                    runtimeDescs.forEach(runtimeDesc => {
                        if (runtimeDesc.kernelId === kernelId) {
                            setRuntimeDesc(runtimeDesc);
                        }
                    });
                });
            }
        }
        setDefaultSet(true);
    }, [groupedRuntimeDescs]);
    // For cell using submenu instead of group would be nice unfortunately the feature
    // is not yet implemented in the component there has been a not-great demo story.
    // https://github.com/primer/react/pull/3585
    return (_jsx(_Fragment, { children: display === 'menu' ? (
        /*
         * Section for Menu display.
         */
        _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedRuntimeDescs === null, 
                        //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
                        icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedRuntimeDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
                                    setRuntimeDesc(undefined);
                                }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
                                        const annotation = runtimeDesc.podName
                                            ? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}`
                                            : runtimeDesc.kernelId
                                                ? ` - ${runtimeDesc.kernelId}`
                                                : '';
                                        const fullDisplayName = (runtimeDesc.displayName ?? '') + annotation;
                                        const displayName = (runtimeDesc.displayName?.length ?? 0) >
                                            RUNTIME_DISPLAY_NAME_MAX_LENGTH
                                            ? runtimeDesc.displayName.slice(0, RUNTIME_DISPLAY_NAME_MAX_LENGTH) + '…'
                                            : (runtimeDesc.displayName ?? '');
                                        return (_jsxs(ActionList.Item, { title: fullDisplayName, selected: (runtimeDesc.location === runtimeDesc?.location ||
                                                (isRuntimeRemote(runtimeDesc.location) &&
                                                    isRuntimeRemote(runtimeDesc?.location ?? 'local'))) &&
                                                (runtimeDesc.kernelId ?? runtimeDesc.name) ===
                                                    (runtimeDesc?.kernelId ?? runtimeDesc?.name), onSelect: () => {
                                                setRuntimeDesc(runtimeDesc);
                                            }, children: [_jsx(ActionList.LeadingVisual, { children: runtimeDesc.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : runtimeDesc.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) }), displayName + annotation.slice(0, 10)] }, runtimeDesc.name));
                                    })] }, group))), !!postActions && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), postActions] }))] }) })] })) : (
        /*
         * Section for Radio display.
         */
        _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
                                return (_jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
                                                        setRuntimeDesc(k);
                                                    }, checked: (k.location === k?.location ||
                                                        (isRuntimeRemote(k.location) &&
                                                            isRuntimeRemote(k?.location ?? 'local'))) &&
                                                        (k.kernelId ?? k.name) ===
                                                            (runtimeDesc?.kernelId ?? runtimeDesc?.name) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: k.displayName }), k.kernelId && k.location === 'remote' && (_jsx(Box, { ml: 3, mt: 1, children: _jsx(CreditsIndicator, { kernelId: k.kernelId, serviceManager: multiServiceManager.remote }, "credits-indicator") }))] }) }), _jsx(FormControl.Caption, { children: _jsxs(LabelGroup, { sx: { marginTop: 1 }, children: [_jsx(Label, { variant: "secondary", children: k.name }), _jsx(Label, { variant: "secondary", sx: { marginLeft: 1 }, children: k.location }), k.burningRate && (_jsxs(Label, { variant: "sponsors", sx: { marginLeft: 1 }, children: [k.burningRate, " credits/second"] })), k.gpu && (_jsx(Label, { variant: "success", sx: { marginLeft: 1 }, children: "GPU" }))] }) })] }), _jsx(ActionList.Divider, {})] }, k.kernelId));
                            })] }, group))) })), !!postActions && _jsx(_Fragment, { children: postActions })] })) }));
}
export default RuntimePickerBase;
