import { Box, CircularProgress, Stack, Typography } from '@mui/material';
import { useCreation } from 'ahooks';
import Center from '@arcblock/ux/lib/Center';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { ConfigSpaceProvider, useConfigSpaceContext } from '../../../contexts/config-space';
import ConnectTo from '../../component/did-space/connect-to';
import Disconnect from '../../component/did-space/disconnect';
import Connected from '../../component/did-space/connected';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Storage() {
  /** @type {{ blocklet: import('@blocklet/server-js').BlockletState }} */
  const {
    spaceGateway,
    settingStorageEndpoint,
    updateSpaceGateway,
    hasStorageEndpoint,
    loading,
    storageEndpoint
  } = useConfigSpaceContext();
  const connectToSx = useCreation(() => {
    return {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: '16px'
    };
  });
  if (loading) {
    return /*#__PURE__*/_jsx(Center, {
      relative: "parent",
      children: /*#__PURE__*/_jsx(CircularProgress, {})
    });
  }
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      maxWidth: 'md',
      position: 'relative'
    },
    children: [hasStorageEndpoint ? /*#__PURE__*/_jsx(Connected, {
      spaceGateway: spaceGateway,
      settingStorageEndpoint: settingStorageEndpoint
    }) : /*#__PURE__*/_jsx(Disconnect, {}), /*#__PURE__*/_jsx(Box, {
      sx: connectToSx,
      children: /*#__PURE__*/_jsx(ConnectTo, {
        onConnect: updateSpaceGateway,
        storageEndpoint: storageEndpoint
      })
    })]
  });
}
export default function BlockletStorage() {
  const {
    t
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(ConfigSpaceProvider, {
    children: [/*#__PURE__*/_jsxs(Stack, {
      spacing: 1,
      sx: {
        marginBottom: 2
      },
      children: [/*#__PURE__*/_jsx(Typography, {
        sx: {
          fontSize: '1.2rem',
          fontWeight: 'bold'
        },
        children: t('storage.appLevel.title')
      }), /*#__PURE__*/_jsx(Typography, {
        sx: {
          color: 'text.secondary'
        },
        children: t('storage.appLevel.description')
      })]
    }), /*#__PURE__*/_jsx(Storage, {})]
  });
}