import { Box, SxProps } from '@mui/material';
import { useCreation, useSize } from 'ahooks';
import { useRef } from 'react';
import useBrowser from '@arcblock/react-hooks/lib/useBrowser';

import PoweredBy from './powered-by';
import AppInfoItem from './app-info-item';
import AppIcon from './app-icon';
import { getDIDColor, hexToRgba } from '../Util';
import { mergeSx } from '../Util/style';
import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';

export default function DIDConnectFooter({
  currentAppInfo = globalThis.blocklet,
  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
  sx = {},
}: {
  currentAppInfo?: any;
  currentAppColor?: string;
  sx?: SxProps;
}) {
  const browser = useBrowser();
  const rootRef = useRef<HTMLDivElement>(null);
  const size = useSize(rootRef);
  const isSmallView = useCreation(() => {
    if (size) {
      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
    }
    return true;
  }, [size, size?.width]);

  return (
    <Box
      ref={rootRef}
      sx={mergeSx(
        {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          gap: 1,
          fontSize: 12,
          backgroundColor: hexToRgba(currentAppColor, 0.08),
          // 需要保持跟 .did-connect__root 的规则一样
          mx: isSmallView ? -2 : -3,
          // eslint-disable-next-line no-nested-ternary
          px: isSmallView ? (browser.arcSphere ? 1 : 2) : 3,
          py: 1.5,
          // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
          overflow: 'auto',
          '&::-webkit-scrollbar': {
            display: 'none', // 隐藏滚动条 (Webkit 浏览器)
          },
          '-ms-overflow-style': 'none', // 隐藏滚动条 (IE 浏览器)
          'scrollbar-width': 'none', // 隐藏滚动条 (Firefox)
        },
        sx
      )}
      className="did-connect__footer">
      <AppInfoItem
        appInfo={currentAppInfo}
        appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
        sx={{
          flex: 1,
          overflow: 'hidden',
        }}
      />

      <PoweredBy sx={{ maxWidth: '100%', justifyContent: 'end' }} />
    </Box>
  );
}
