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

import IosImage from './images/ios.png';
import AndroidImage from './images/android.png';
import { styled } from '../Theme';

export default function WechatPrompt() {
  const browser = useBrowser();

  if (!browser.mobile.any) {
    return null;
  }

  if (!browser.wechat) {
    return null;
  }

  // @ts-expect-error
  if (browser.android) {
    return (
      <Dialog open fullScreen>
        <Container>
          <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
          <div className="wechat-tip">
            <Typography className="wechat-tip-text">2. 点击“在浏览器打开”，才能调起 DID Wallet</Typography>
            <img className="wechat-tip-img" src={AndroidImage} alt="Open in Android Browser" />
          </div>
        </Container>
      </Dialog>
    );
  }

  return (
    <Dialog open fullScreen>
      <Container>
        <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
        <div className="wechat-tip">
          <Typography className="wechat-tip-text">2. 点击“在Safari中打开”，才能调起 DID Wallet</Typography>
          <img className="wechat-tip-img" src={IosImage} alt="Open in Safari" />
        </div>
      </Container>
    </Dialog>
  );
}

const Container = styled('div')`
  .wechat-title {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: #9cdbd8;
  }

  .wechat-tip {
    display: flex;
    flex-direction: column;
    align-items: center;

    .wechat-tip-text {
      font-size: 20px;
      padding: 10px 10px;
      overflow: auto;
      word-break: break-word;
      text-align: center;
    }

    .wechat-tip-img {
      width: 90%;
      object-fit: cover;
    }
  }
`;
