//
// Copyright 2020 DXOS.org
//
import React, { useMemo } from 'react';
import { Format } from '@dxos/echo/internal';
import { Toolbar } from '@dxos/react-ui';
import { MasterDetailTable, PanelContainer } from '../../../components';
import { SpaceSelector } from '../../../containers';
import { useCredentials, useDevtoolsState } from '../../../hooks';
export const CredentialsPanel = (props) => {
    const state = useDevtoolsState();
    const space = props.space ?? state.space;
    const credentials = useCredentials({ spaceKey: state.haloSpaceKey ?? space?.key });
    const properties = useMemo(() => [
        { name: 'id', format: Format.TypeFormat.DID, tooltip: true, size: 120 },
        { name: 'issuer', format: Format.TypeFormat.DID, tooltip: true, size: 120 },
        { name: 'type', format: Format.TypeFormat.String, size: 380 },
        { name: 'issuanceDate', format: Format.TypeFormat.DateTime, title: 'issued', size: 194 },
    ], []);
    const data = useMemo(() => credentials.map((credential) => ({
        id: credential.id?.toString() ?? '',
        issuer: credential.issuer.toString(),
        type: credential.subject.assertion['@type'],
        issuanceDate: credential.issuanceDate,
        _original: credential,
    })), [credentials]);
    return (React.createElement(PanelContainer, { toolbar: props.space ? undefined : (React.createElement(Toolbar.Root, null,
            React.createElement(SpaceSelector, null))) },
        React.createElement(MasterDetailTable, { properties: properties, data: data, detailsTransform: (d) => d._original, detailsPosition: 'bottom' })));
};
//# sourceMappingURL=CredentialsPanel.js.map