import PropTypes from 'prop-types';
import { Box, Divider } from '@mui/material';
import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
import { detectWalletExtension } from '@arcblock/ux/lib/Util';
import { useCreation } from 'ahooks';
import { useBrowser } from '@arcblock/react-hooks';

import MobileLoginItem from './mobile-login-item';
import WebLoginItem from './web-login-item';
import BackButton from '../back-button';
import { useStateContext } from '../../contexts/state';

export default function WalletLoginOptions({
  qrcode,
  tokenState,
  webWalletUrl = getWebWalletUrl(),
  size = 'small',
  disableSwitchApp = false,
  tokenKey,
  walletLoginRef = null,
  webLoginRef = null,
  onMobileLoginClick,
  onWebLoginClick,
  onBack,
}) {
  const { t, locale } = useStateContext();
  const browser = useBrowser();
  const isSameProtocol = checkSameProtocol(webWalletUrl);
  const extension = detectWalletExtension();

  const isTablet = useCreation(() => {
    return browser.mobile.tablet || (!browser.mobile.any && window?.navigator?.maxTouchPoints > 0);
  }, [browser.mobile.tablet, browser.mobile.any]);
  return (
    <>
      {qrcode}

      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <Box sx={{ width: '100%' }}>
          <Divider
            orientation="horizontal"
            sx={{
              fontSize: 12,
              color: 'text.hint',
              '&::before, &::after': {
                borderColor: 'divider',
              },
            }}>
            or
          </Divider>
        </Box>
        <Box
          sx={{
            width: '100%',
            '.arc-login-item': {
              width: '100%',
              justifyContent: 'center',
              '& > .arc-login-item__body': {
                flex: 'unset',
              },
              '& > .other-item-icon': {
                display: 'none !important',
              },
            },
          }}>
          {isTablet ? (
            <MobileLoginItem
              t={t}
              key={LOGIN_PROVIDER.WALLET}
              ref={walletLoginRef}
              tokenState={tokenState}
              isTablet={isTablet}
              sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
              locale={locale}
              tokenKey={tokenKey}
              disableSwitchApp={disableSwitchApp}
              onClick={onMobileLoginClick}
            />
          ) : (
            // eslint-disable-next-line react/jsx-no-useless-fragment
            <>
              {(isSameProtocol || extension) && (!browser.mobile.any || extension) ? (
                <WebLoginItem
                  t={t}
                  key={LOGIN_PROVIDER.WALLET}
                  ref={webLoginRef}
                  tokenState={tokenState}
                  webWalletUrl={webWalletUrl}
                  sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
                  disableSwitchApp={disableSwitchApp}
                  onClick={onWebLoginClick}
                />
              ) : null}
            </>
          )}
        </Box>

        {onBack && <BackButton variant="text" onClick={onBack} />}
      </Box>
    </>
  );
}

WalletLoginOptions.propTypes = {
  qrcode: PropTypes.node.isRequired,
  tokenState: PropTypes.object.isRequired,
  webWalletUrl: PropTypes.string,
  size: PropTypes.oneOf(['small', 'normal', 'large']),
  disableSwitchApp: PropTypes.bool,
  tokenKey: PropTypes.string.isRequired,
  walletLoginRef: PropTypes.object,
  webLoginRef: PropTypes.object,
  onMobileLoginClick: PropTypes.func.isRequired,
  onWebLoginClick: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
};
