//
// Copyright 2023 DXOS.org
//
import React, { useMemo, useState } from 'react';
import { useClient } from '@dxos/react-client';
import { useAsyncEffect } from '@dxos/react-hooks';
import { Icon, Input, Toolbar, useFileDownload } from '@dxos/react-ui';
import { JsonView, PanelContainer, Tree } from '../../../components';
export const DiagnosticsPanel = () => {
    const client = useClient();
    const [data, setData] = useState({});
    const handleRefresh = async () => {
        try {
            setData({ status: 'Pending...' });
            const data = await client.diagnostics({ humanize: false, truncate: true });
            setData(data);
        }
        catch (err) {
            setData({ status: err.message });
        }
    };
    const [recording, setRecording] = useState(false);
    useAsyncEffect(async () => {
        const { recording = false } = await client.services.services.LoggingService.controlMetrics({});
        setRecording(recording);
    }, [client]);
    const handleSetRecording = async (record) => {
        const { recording = false } = await client.services.services.LoggingService.controlMetrics({ record });
        setRecording(recording);
    };
    const handleResetMetrics = async () => {
        const { recording = false } = await client.services.services.LoggingService.controlMetrics({ reset: true });
        setRecording(recording);
        await handleRefresh();
    };
    const fileDownload = useFileDownload();
    const handleDownload = async () => {
        fileDownload(new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' }), `${new Date().toISOString().replace(/\W/g, '-')}.json`);
    };
    const info = useMemo(() => {
        if (window.chrome) {
            return ['chrome://inspect/#workers'];
        }
    }, []);
    const handleCopy = async (text) => {
        await navigator.clipboard.writeText(text);
    };
    return (React.createElement(PanelContainer, { toolbar: React.createElement(Toolbar.Root, null,
            React.createElement(Input.Root, null,
                React.createElement(Input.Checkbox, { checked: recording, onCheckedChange: (recording) => handleSetRecording(!!recording) }),
                React.createElement(Input.Label, null, "Record metrics")),
            React.createElement("div", { className: 'grow' }),
            React.createElement(Toolbar.Button, { onClick: handleRefresh }, "Run Diagnostics"),
            React.createElement(Toolbar.IconButton, { icon: 'ph--download--regular', label: 'Download diagnostics', onClick: handleDownload }),
            React.createElement(Toolbar.Button, { onClick: handleResetMetrics }, "Reset metrics")), footer: info && (React.createElement("div", { className: 'flex p-2 items-center text-sm font-mono gap-2' }, info.map((text, i) => (React.createElement("div", { key: i, className: 'inline-flex items-center gap-1 cursor-pointer', onClick: () => handleCopy(text) },
            React.createElement(Icon, { icon: 'ph--clipboard-text--regular' }),
            text))))) }, (true && React.createElement(JsonView, { data: data })) || React.createElement(Tree, { data: data })));
};
//# sourceMappingURL=DiagnosticsPanel.js.map