import { DIDConnectFooter } from '@arcblock/ux/lib/DIDConnect';
import { DID_CONNECT_SMALL_WIDTH } from '@arcblock/ux/lib/Util/constant';
import { getCurrentApp } from '@arcblock/ux/lib/Util/federated';
import { Box, Skeleton } from '@mui/material';

export default function FallbackConnect(props) {
  const currentAppInfo = globalThis.blocklet ? getCurrentApp(globalThis.blocklet) : globalThis.env;
  return (
    <Box
      className="did-connect__root"
      sx={{
        backgroundColor: 'background.default',
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        position: 'relative',
        maxWidth: '100%',
        // eslint-disable-next-line react/prop-types
        width: props.mode === 'drawer' ? '100%' : DID_CONNECT_SMALL_WIDTH - 20,
        transition: 'width 0.2s ease-in-out',
        margin: 'auto',
        p: 3,
        pb: 0,
        gap: 2.5,
      }}>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <Skeleton variant="rounded" height={28} sx={{ width: '6rem' }} />
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          <Skeleton variant="rounded" sx={{ fontSize: '13px', height: '15px' }} />
          <Skeleton variant="rounded" sx={{ fontSize: '13px', height: '15px', width: '3rem' }} />
        </Box>
      </Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <Skeleton variant="rounded" sx={{ height: '35px' }} />
        <Skeleton variant="rounded" sx={{ height: '35px' }} />
        <Skeleton variant="rounded" sx={{ height: '35px' }} />
        <Box sx={{ display: 'flex', gap: 1.5, mt: 1 }}>
          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
          <Skeleton variant="rounded" sx={{ flex: 1, height: '32px' }} />
        </Box>
      </Box>
      <DIDConnectFooter currentAppInfo={currentAppInfo} />
    </Box>
  );
}
