import React from 'react';
import { Box, CircularProgress, Grid, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { DIDSpaceConnection } from '@blocklet/did-space-react';
import GatewayAction from './gateway-action';
import ConnectTo from './connect-to';
import SpacesBackupRecords from './backups';
import DiskInfo from '../../disk-info';
import { useBlockletStorageContext } from '../../../contexts/blocklet-storage';
import AutoBackup from './auto-backup';

/**
 * @typedef {{
 *  did: string,
 *  name: string,
 *  url: string,
 *  endpoint: string
 *  protected?: boolean,
 *  loading?: boolean,
 * }} SpaceGateway
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function Connected() {
  const {
    t
  } = useLocaleContext();
  const {
    spaceGateways,
    spaceGatewaysLoading,
    spaceGatewayIsSelected
  } = useBlockletStorageContext();
  const shouldShowLoading = spaceGatewaysLoading && !spaceGateways?.length;
  const renderAction = ({
    spaceGateway,
    spaceStatus,
    selected,
    refresh
  }) => {
    return /*#__PURE__*/_jsx(GatewayAction, {
      spaceGateway: spaceGateway,
      spaceStatus: spaceStatus,
      selected: selected,
      onConnected: () => refresh(),
      onBackedUp: err => err && refresh()
    });
  };
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      flexDirection: 'column'
    },
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        flexDirection: {
          xs: 'column',
          md: 'row'
        },
        gap: {
          xs: 1,
          md: 2
        },
        justifyContent: {
          xs: 'center',
          md: 'flex-start'
        },
        alignItems: {
          xs: 'flex-start',
          md: 'center'
        }
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: '1.2rem',
          fontWeight: 'bold',
          flexGrow: 1
        },
        children: t('storage.spaces.connected.title')
      }), /*#__PURE__*/_jsx(AutoBackup, {}), /*#__PURE__*/_jsx(ConnectTo, {})]
    }), /*#__PURE__*/_jsx(Box, {
      sx: {
        mt: 2
      },
      children: shouldShowLoading ? /*#__PURE__*/_jsx(Box, {
        sx: {
          display: 'flex',
          justifyContent: 'center'
        },
        children: /*#__PURE__*/_jsx(CircularProgress, {})
      }) : /*#__PURE__*/_jsx(Grid, {
        container: true,
        spacing: 2,
        children: /*#__PURE__*/_jsx(_Fragment, {
          children: spaceGateways.map(x => {
            return /*#__PURE__*/_jsx(Grid, {
              size: {
                xs: 12,
                md: 6
              },
              children: /*#__PURE__*/_jsx(DIDSpaceConnection, {
                endpoint: x.endpoint,
                selected: spaceGatewayIsSelected(x)
                // eslint-disable-next-line react/no-unstable-nested-components
                ,
                action: renderAction
              }, x.endpoint)
            }, x.endpoint);
          })
        })
      })
    }), /*#__PURE__*/_jsx(SpacesBackupRecords, {
      sx: {
        marginTop: '24px'
      }
    }), /*#__PURE__*/_jsx(Typography, {
      sx: {
        fontSize: '1.2rem',
        fontWeight: 'bold',
        mb: 2
      },
      children: t('common.dataStorage')
    }), /*#__PURE__*/_jsx(DiskInfo, {})]
  });
}
export default Connected;