//
// Copyright 2020 DXOS.org
//
import React, { useMemo } from 'react';
import { Format } from '@dxos/echo/internal';
import { SpaceMember, useMembers } from '@dxos/react-client/echo';
import { Toolbar } from '@dxos/react-ui';
import { MasterDetailTable, PanelContainer } from '../../../components';
import { DataSpaceSelector } from '../../../containers';
import { useDevtoolsState } from '../../../hooks';
export const MembersPanel = (props) => {
    const state = useDevtoolsState();
    const space = props.space ?? state.space;
    const members = useMembers(space?.key);
    const properties = useMemo(() => [
        { name: 'identityKey', format: Format.TypeFormat.DID },
        { name: 'displayName', format: Format.TypeFormat.String },
        {
            name: 'status',
            format: Format.TypeFormat.SingleSelect,
            config: {
                options: [
                    { id: 'online', title: 'online', color: 'green' },
                    { id: 'offline', title: 'offline', color: 'neutral' },
                    { id: 'unknown', title: 'unknown', color: 'red' },
                ],
            },
        },
    ], []);
    const data = useMemo(() => {
        return members.map((member) => {
            let status = 'unknown';
            switch (member.presence) {
                case SpaceMember.PresenceState.ONLINE:
                    status = 'online';
                    break;
                case SpaceMember.PresenceState.OFFLINE:
                    status = 'offline';
                    break;
            }
            return {
                id: member.identity.identityKey.toString(),
                identityKey: member.identity.identityKey,
                displayName: member.identity.profile?.displayName,
                status,
                _original: member,
            };
        });
    }, [members]);
    return (React.createElement(PanelContainer, { toolbar: props.space ? undefined : (React.createElement(Toolbar.Root, null,
            React.createElement(DataSpaceSelector, null))) },
        React.createElement(MasterDetailTable, { properties: properties, data: data, detailsTransform: (item) => item._original, detailsPosition: 'bottom' })));
};
//# sourceMappingURL=MembersPanel.js.map