import React from 'react';
import { Box, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { DIDSpaceDefaultNFT } from '@blocklet/did-space-react';
import ConnectTo from './connect-to';
import DiskInfo from '../../disk-info';
import SpacesBackupRecordsCalendar from './backups-calendar';
import SpacesBackupRecordsTable from './backups-table';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Disconnect() {
  const {
    t
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(Box, {
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        gap: 3,
        flexDirection: {
          xs: 'column',
          md: 'row'
        }
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          alignContent: 'center',
          minWidth: 240
        },
        children: [/*#__PURE__*/_jsx(DIDSpaceDefaultNFT, {
          style: {
            cursor: 'pointer',
            width: '150px',
            height: '100%',
            maxHeight: 160
          }
        }), /*#__PURE__*/_jsx(Typography, {
          sx: {
            my: 2,
            textAlign: 'center',
            color: 'text.secondary'
          },
          children: t('storage.spaces.connect.provider')
        }), /*#__PURE__*/_jsx(ConnectTo, {})]
      }), /*#__PURE__*/_jsxs(Box, {
        sx: {
          flexGrow: 1,
          minWidth: 0
        },
        children: [/*#__PURE__*/_jsx(Box, {
          sx: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            mb: 3
          },
          children: /*#__PURE__*/_jsx(Typography, {
            sx: {
              fontSize: '1.2rem',
              fontWeight: 'bold'
            },
            children: t('storage.spaces.backup.records')
          })
        }), /*#__PURE__*/_jsx(SpacesBackupRecordsCalendar, {})]
      })]
    }), /*#__PURE__*/_jsx(SpacesBackupRecordsTable, {
      sx: {
        marginTop: '24px'
      }
    }), /*#__PURE__*/_jsx(Typography, {
      sx: {
        fontSize: '1.2rem',
        fontWeight: 'bold',
        mb: 2,
        mt: 2
      },
      children: t('common.dataStorage')
    }), /*#__PURE__*/_jsx(DiskInfo, {})]
  });
}
export default Disconnect;