import { Box, Tooltip } from '@mui/material';
import { useCreation } from 'ahooks';
import { mergeSx } from '@arcblock/ux/lib/Util/style';

import { useStateContext } from '../contexts/state';

export default function DownloadTips({ ...rest }) {
  const { t, locale } = useStateContext();
  const downloadUrl = useCreation(() => {
    if (['zh', 'en'].includes) {
      return `https://www.didwallet.io/${locale}`;
    }
    return 'https://www.didwallet.io/en';
  }, [locale]);

  const tips = t('downloadTips');

  return (
    <Tooltip
      title={tips}
      arrow
      placement="top"
      slotProps={{
        popper: {
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [0, -8],
              },
            },
          ],
        },
      }}>
      <Box
        component="a"
        href={downloadUrl}
        target="_blank"
        rel="noopener"
        {...rest}
        sx={mergeSx(
          {
            color: 'primary.main',
            textDecoration: 'none',
            '&:hover': {
              textDecoration: 'dashed underline',
            },
          },
          rest?.sx
        )}>
        DID Wallet
      </Box>
    </Tooltip>
  );
}