import { Box, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { DIDSpaceConnect, EmptySpacesNFTIcon, type DIDSpaceGateway } from '@blocklet/did-space-react';
import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';

function Disconnect() {
  const { t } = useLocaleContext();
  const { updateSpaceGateway, session } = useConfigUserSpaceContext();

  const onSuccess = ({ spaceGateway }: { spaceGateway: DIDSpaceGateway }) => updateSpaceGateway(spaceGateway);

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
      }}>
      <Typography
        sx={{
          fontSize: '16px',
          fontWeight: 'bold',
        }}>
        {t('storage.spaces.connect.providerForStorage')}
      </Typography>
      <EmptySpacesNFTIcon
        viewBox="0 0 228 258"
        style={{
          width: '156px',
          height: '156px',
          margin: '16px 0',
        }}
      />
      <Box>
        <DIDSpaceConnect session={session} onSuccess={onSuccess} />
      </Box>
    </Box>
  );
}

export default Disconnect;
