//
// Copyright 2020 DXOS.org
//
import React, { useMemo, useState } from 'react';
import { Format } from '@dxos/echo/internal';
import { DXN } from '@dxos/keys';
import { useQueue } from '@dxos/react-client/echo';
import { Toolbar } from '@dxos/react-ui';
import { SyntaxHighlighter, createElement } from '@dxos/react-ui-syntax-highlighter';
import { DynamicTable } from '@dxos/react-ui-table';
import { mx } from '@dxos/ui-theme';
import { PanelContainer, Searchbar } from '../../../components';
// import { DataSpaceSelector } from '../../../containers';
// import { useDevtoolsState } from '../../../hooks';
export const QueuesPanel = () => {
    // const { space } = useDevtoolsState();
    const [queueInput, setQueueInput] = useState('');
    const queueDxn = DXN.tryParse(queueInput);
    const queue = useQueue(queueDxn);
    const [selected, setSelected] = useState();
    const [selectedVersionObject, setSelectedVersionObject] = useState(null);
    const properties = useMemo(() => [
        { name: 'id', format: Format.TypeFormat.DID, size: 320 },
        { name: 'type', format: Format.TypeFormat.JSON, title: 'type' },
    ], []);
    const rows = useMemo(() => {
        return (queue?.objects ?? []).map((item) => ({
            id: item.id,
            type: item['@type'],
            _original: item,
        }));
    }, [queue?.objects]);
    const handleRowClicked = (row) => {
        if (!row) {
            setSelected(undefined);
            return;
        }
        // Always pick the last item in the queue.
        const lastItem = queue?.objects[queue?.objects.length - 1];
        if (lastItem) {
            setSelectedVersionObject(null);
            setSelected(lastItem);
        }
    };
    const features = useMemo(() => ({ selection: { enabled: true, mode: 'single' } }), []);
    return (React.createElement(PanelContainer, { toolbar: React.createElement(Toolbar.Root, null,
            React.createElement(Searchbar, { onChange: setQueueInput })) },
        React.createElement("div", { className: 'flex grow flex-col overflow-hidden divide-y divide-separator' },
            React.createElement(DynamicTable, { rows: rows, properties: properties, features: features, onRowClick: handleRowClicked }),
            React.createElement("div", { className: mx('flex overflow-auto', 'h-1/2') }, selected && React.createElement(ObjectDataViewer, { object: selectedVersionObject ?? selected })))));
};
const ObjectDataViewer = ({ object }) => {
    const text = JSON.stringify(object, null, 2);
    const rowRenderer = ({ rows, stylesheet, useInlineStyles, }) => {
        return rows.map((row, index) => {
            return createElement({
                node: row,
                stylesheet,
                style: {},
                useInlineStyles,
                key: index,
            });
        });
    };
    return (React.createElement(SyntaxHighlighter, { language: 'json', renderer: rowRenderer }, text));
};
//# sourceMappingURL=QueuesPanel.js.map