import { Box, Typography } from '@mui/material';
import React from 'react';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { DIDSpaceConnection } from '@blocklet/did-space-react';
import { useConfigSpaceContext } from '../../../contexts/config-space';
import Action from './action';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Connected() {
  const {
    t
  } = useLocaleContext();
  const {
    spaceGateway,
    settingStorageEndpoint
  } = useConfigSpaceContext();
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'column'
    },
    children: [/*#__PURE__*/_jsx(Box, {
      sx: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
      },
      children: /*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: '1rem',
          fontWeight: 'bold'
        },
        children: t('storage.spaces.connected.title')
      })
    }), /*#__PURE__*/_jsx(Box, {
      children: /*#__PURE__*/_jsx(DIDSpaceConnection, {
        sx: {
          marginTop: 2
        },
        endpoint: spaceGateway.endpoint,
        selected: true
        // eslint-disable-next-line react/no-unstable-nested-components
        ,
        action: props => /*#__PURE__*/_jsx(Action, {
          ...props,
          onDisconnect: () => settingStorageEndpoint(null)
        })
      })
    })]
  });
}
export default Connected;