import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useMemo } from 'react';
import { IconButton, ToggleSwitch, FormControl } from '@primer/react';
import { Box } from '@datalayer/primer-addons';
import { Blankslate, DataTable, Table } from '@primer/react/experimental';
import { nullTranslator } from '@jupyterlab/translation';
import { checkIcon } from '@jupyterlab/ui-components';
/**
 * Runtime variables selector component.
 */
export function RuntimeVariables(props) {
    const { className, translator, selectedVariables, setSelectVariable, transferVariables, setTransferVariable, kernelVariables, } = props;
    const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
    const nRows = Object.keys(kernelVariables ?? {}).length;
    // Sorting and actions does not play nice together :'(
    const columns = [
        {
            header: trans.__('Name'),
            field: 'name',
            rowHeader: true,
        },
        {
            header: trans.__('Type'),
            field: 'type',
        },
        {
            id: 'select',
            maxWidth: '70px',
            header: () => (_jsx(IconButton, { "aria-label": selectedVariables.length === nRows
                    ? trans.__('Deselect all')
                    : trans.__('Select all'), title: selectedVariables.length === nRows
                    ? trans.__('Deselect all')
                    : trans.__('Select all'), icon: selectedVariables.length === nRows
                    ? checkIcon.react
                    : () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
                    e.preventDefault();
                    if (selectedVariables.length === nRows) {
                        setSelectVariable([]);
                    }
                    else {
                        setSelectVariable(Object.keys(kernelVariables ?? {}));
                    }
                } })),
            renderCell: (row) => {
                const isSelected = selectedVariables.includes(row.name);
                return (_jsx(IconButton, { "aria-label": isSelected
                        ? trans.__('Deselect: %1', row.name)
                        : trans.__('Select: %1', row.name), title: isSelected
                        ? trans.__('Deselect: %1', row.name)
                        : trans.__('Select: %1', row.name), icon: isSelected ? checkIcon.react : () => _jsx("span", {}), variant: "default", size: "small", onClick: e => {
                        e.preventDefault();
                        const index = selectedVariables.findIndex(v => v === row.name);
                        if (index >= 0) {
                            const copy = [...selectedVariables];
                            copy.splice(index, 1);
                            setSelectVariable(copy);
                        }
                        else {
                            setSelectVariable([...selectedVariables, row.name]);
                        }
                    } }));
            },
        },
    ];
    return (_jsxs(Box, { className: className, sx: { paddingTop: '10px' }, children: [_jsxs(FormControl, { layout: "horizontal", children: [_jsx(FormControl.Label, { children: trans.__('Transfer variables') }), _jsx(ToggleSwitch, { checked: transferVariables, size: "small", onClick: e => {
                            e.preventDefault();
                            setTransferVariable(!transferVariables);
                        }, "aria-labelledby": "kernel-toggle-variables" })] }), transferVariables && (_jsxs(Table.Container, { sx: { flex: '1 1 auto', marginTop: 3 }, children: [_jsx(Table.Subtitle, { as: "p", id: "dla-kernel-variables-subtitle", children: trans.__('The list of transferable runtime variables.') }), kernelVariables ? (Object.keys(kernelVariables ?? {}).length ? (_jsx(DataTable, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", data: Object.entries(kernelVariables ?? {})
                            .map(([name, type], id) => ({ id, name, type }))
                            .sort((a, b) => (a.name > b.name ? 1 : -1)), columns: columns, cellPadding: "condensed" })) : (_jsx(Box, { sx: { gridArea: 'table' }, children: _jsx(Blankslate, { border: true, children: _jsx(Blankslate.Heading, { children: trans.__('No eligible variables.') }) }) }))) : (_jsx(Table.Skeleton, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", columns: columns, rows: 5 }))] }))] }));
}
