import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
import { Fab } from '@mui/material';

import { styled } from '../Theme';
import type { Locale } from '../type';

export interface OpenInWalletProps {
  link: string;
  locale?: Locale;
}

export default function OpenInWallet({ link, locale = 'zh' }: OpenInWalletProps) {
  const buttonText = locale === 'zh' ? '在 DID Wallet 打开' : 'Open in DID Wallet';
  const browser = useBrowser();

  if (browser.mobile.any && !(browser.wallet || browser.arcSphere) && !browser.wechat) {
    const deepLink = `abt://abtwallet.io/i?action=requestOpenUrl&url=${encodeURIComponent(link)}`;

    return (
      <Button
        size="small"
        href={deepLink}
        variant="extended"
        color="primary"
        // @ts-expect-error
        rounded
        target="_blank"
        className="open-in-wallet-button">
        {buttonText}
      </Button>
    );
  }
  return null;
}

const Button = styled(Fab)`
  && {
    font-size: 12px;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform-origin: 50% 50%;
    transform: translateX(-50%);
    min-width: 120px;
    z-index: ${(props) => props.theme.zIndex.tooltip};
  }
`;
