import { Box, Theme, Typography, useMediaQuery } from '@mui/material';
import { isEthereumDid } from '@arcblock/did';
import { getDIDMotifInfo } from '@arcblock/did-motif';
import { useCreation } from 'ahooks';
import { useTheme } from '../Theme';

import PoweredByArcBlock from '../PoweredByArcBlock';
import Avatar from '../Avatar';
import { getDIDColor, hexToRgba } from '../Util';
import useBlockletLogo from '../hooks/use-blocklet-logo';

type LandingPageProps = {
  did: string;
  children: React.ReactNode;
  title?: any;
  description?: any;
  actions?: any;
  logo?: any;
  logoSize?: number;
  poweredBy?: any;
  termsOfUse?: any;
  standalone?: boolean;
};

export default function LandingPage({
  did,
  children,
  title = undefined,
  description = undefined,
  actions = undefined,
  logo = undefined,
  logoSize = 50,
  poweredBy = undefined,
  termsOfUse = undefined,
  standalone = false,
}: LandingPageProps) {
  const blockletData = globalThis?.blocklet || globalThis?.env || {};
  const { palette } = useTheme();
  const isMd = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
  const appLogo = useBlockletLogo({
    meta: blockletData,
  });
  const currentAppColor = useCreation(() => {
    const _did = blockletData.appPid;
    const isEthDid = isEthereumDid(_did);
    const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(_did);
    if (isEthDid) {
      return getDIDColor(_did);
    }

    return didMotifInfo.color;
  }, [blockletData?.appPid]);

  if (!did) {
    return children;
  }

  if (title === undefined) {
    // eslint-disable-next-line no-param-reassign
    title = blockletData.appName;
  }
  if (description === undefined) {
    // eslint-disable-next-line no-param-reassign
    description = blockletData.appDescription;
  }

  if (logo === undefined) {
    // eslint-disable-next-line no-param-reassign
    logo = appLogo || '';
  }

  if (typeof logo === 'string') {
    if (logo) {
      // eslint-disable-next-line no-param-reassign
      logo = (
        <Box
          sx={{
            height: logoSize,
            maxHeight: logoSize,
            objectFit: 'contain',
          }}
          component="img"
          src={logo}
          alt={`${blockletData.appName}'s logo`}
        />
      );
    } else {
      // eslint-disable-next-line no-param-reassign
      logo = <Avatar size={logoSize} did={did} src={logo} variant="rounded" />;
    }
  }

  if (poweredBy === undefined) {
    // eslint-disable-next-line no-param-reassign
    poweredBy = (
      <PoweredByArcBlock
        linkProps={{
          color: palette.text.secondary,
          sx: {
            '&:hover': {
              textDecoration: 'underline',
            },
          },
        }}
        showExtra={!isMd}
        sx={{
          textAlign: 'center',
          fontSize: '12px',
          color: 'text.secondary',
        }}
      />
    );
  }

  let content = children;
  if (!children && !isMd) {
    content = (
      <Box
        sx={{
          filter: 'blur(180px)',
          display: 'flex',
        }}>
        {/* 这里只能使用 did-avatar，用于加强页面的层次感 */}
        <Avatar size={210} did={did} variant="rounded" />
      </Box>
    );
  }

  const showChildren = Boolean(children);
  let showInfo = !standalone;
  if (isMd) {
    showInfo = !showChildren;
  }

  return (
    <Box
      sx={{
        width: '100%',
        minHeight: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        px: {
          xs: 2,
          sm: 4,
          md: 8,
        },
        pt: {
          xs: 2,
          sm: 4,
          md: 6,
        },
        pb: {
          xs: 5,
          md: 8,
        },
        background: `radial-gradient(circle at bottom right, ${hexToRgba(currentAppColor, 0.3)} 10%, ${palette.background.default} 50%)`,
        position: 'relative',
      }}>
      <Box
        sx={{
          maxWidth: 1200,
          display: 'flex',
          alignItems: 'center',
          justifyContent: [showInfo, content].filter(Boolean).length > 1 ? 'space-between' : 'center',
          width: '100%',
          margin: 'auto',
        }}>
        {showInfo ? (
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: 1.5,
            }}>
            <Box sx={{ display: 'flex', alignItems: 'center' }}>{logo}</Box>
            <Typography
              variant="h2"
              sx={{
                fontWeight: 'bold',
                fontSize: {
                  sm: '2.25rem',
                  md: '2.75rem',
                  xl: '3.5rem',
                },
              }}>
              {title}
            </Typography>
            {description ? (
              <Box
                sx={{
                  mb: 2,
                  color: 'text.secondary',
                }}>
                {description}
              </Box>
            ) : null}
            {actions ? <Box sx={{ mt: 8 }}>{actions}</Box> : null}
            {termsOfUse ? <Box sx={{ mt: -1, color: 'grey' }}>{termsOfUse}</Box> : null}
          </Box>
        ) : null}

        {content}
      </Box>
      <Box
        sx={{
          position: 'absolute',
          zIndex: 10,
          bottom: 10,
          left: 10,
          right: 10,
          textAlign: 'center',
        }}>
        {poweredBy}
      </Box>
    </Box>
  );
}
