import Center from '@arcblock/ux/lib/Center';
import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import styled from '@emotion/styled';
import { Box, CircularProgress } from '@mui/material';
import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';
import Connected from './connected';
import Disconnect from './disconnect';
import { translations } from '../../libs/locales';

function DidSpace() {
  const { spaceGateway, hasStorageEndpoint, loading } = useConfigUserSpaceContext();
  const { locale } = useLocaleContext();

  if (loading) {
    return (
      <Center relative="parent">
        <CircularProgress />
      </Center>
    );
  }

  return (
    <LocaleProvider translations={translations} locale={locale}>
      <Container>
        <Box
          sx={{
            maxWidth: '720px',
          }}>
          {hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}
        </Box>
      </Container>
    </LocaleProvider>
  );
}

const Container = styled(Box)`
  height: 100%;
  overflow-y: auto;
`;

export default DidSpace;
