//
// Copyright 2020 DXOS.org
//
import React, { useMemo, useState } from 'react';
import { MulticastObservable } from '@dxos/async';
import { SpaceState } from '@dxos/protocols/proto/dxos/client/services';
import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
import { useMulticastObservable } from '@dxos/react-hooks';
import { Toolbar } from '@dxos/react-ui';
import { PanelContainer } from '../../../components';
import { DataSpaceSelector } from '../../../containers';
import { useDevtoolsState, useSpacesInfo } from '../../../hooks';
import { FeedTable } from './FeedTable';
import { PipelineTable } from './PipelineTable';
import { SpaceProperties } from './SpaceProperties';
import { SyncStateInfo } from './SyncStateInfo';
export const SpaceInfoPanel = (props) => {
    const [, forceUpdate] = useState({});
    const state = useDevtoolsState();
    const space = props.space ?? state.space;
    // TODO(dmaretskyi): We don't need SpaceInfo anymore?
    const spacesInfo = useSpacesInfo();
    const metadata = space?.key && spacesInfo.find((info) => info.key.equals(space?.key));
    const pipelineState = useMulticastObservable(space?.pipeline ?? MulticastObservable.empty());
    const toggleActive = async () => {
        const state = space.state.get();
        if (state === SpaceState.SPACE_INACTIVE) {
            await space.open();
        }
        else {
            await space.close();
        }
    };
    const toggleEdgeReplication = async () => {
        await space?.internal.setEdgeReplicationPreference(space?.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED
            ? EdgeReplicationSetting.DISABLED
            : EdgeReplicationSetting.ENABLED);
        setTimeout(() => forceUpdate({}), 500); // Refresh the panel.
    };
    const toolbar = useMemo(() => (React.createElement(Toolbar.Root, null,
        !props.space && React.createElement(DataSpaceSelector, null),
        React.createElement(Toolbar.IconButton, { icon: 'ph--arrow-clockwise--regular', iconOnly: true, label: 'Refresh', onClick: () => forceUpdate({}) }),
        React.createElement("div", { className: 'grow' }),
        React.createElement(Toolbar.Button, { onClick: toggleActive }, space?.state.get() === SpaceState.SPACE_INACTIVE ? 'Open' : 'Close'),
        React.createElement(Toolbar.Button, { onClick: toggleEdgeReplication }, space?.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED
            ? 'Disable backup to EDGE'
            : 'Enable backup to EDGE'))), [props.space, space?.state, space?.internal.data.edgeReplication]);
    return (React.createElement(PanelContainer, { toolbar: toolbar }, space && metadata && (React.createElement("div", null,
        React.createElement(SpaceProperties, { space: space, metadata: metadata }),
        React.createElement("div", { className: 'bs-24' },
            React.createElement(PipelineTable, { state: pipelineState ?? {}, metadata: metadata, onSelect: props.onSelectPipeline })),
        React.createElement("div", { className: 'bs-48' },
            React.createElement(FeedTable, { onSelect: props.onSelectFeed })),
        React.createElement("div", { className: 'border-bs border-separator' },
            React.createElement(SyncStateInfo, { space: space }))))));
};
//# sourceMappingURL=SpaceInfoPanel.js.map