import React, { FC } from 'react';
import {
  PageWrap,
  Box,
  Flex,
  Heading,
  Paragraph,
  Icon,
  IconCircled,
  icons,
  Button,
  theme,
} from '@polymathnetwork/polymesh-ui';
import { useTranslation } from 'react-i18next';
import { PolyAlertSvg } from './assets/PolyAlertSvg';
import { PolyWalletSvg } from './assets/PolyWalletSvg';
import { hardRedirect } from '../../utils/hardRedirect';

const installUrl =
  'https://chrome.google.com/webstore/detail/polymesh-wallet/jojhfeoedkpkglbfimdfabpdfjaoolaf';

export const ExtensionPage: FC<{
  appName: string;
  mainPath: string;
}> = ({ appName, mainPath }) => {
  const { t } = useTranslation();

  const connect = () => {
    hardRedirect(mainPath);
  };

  return (
    <PageWrap
      style={{
        background: theme.colors.gradient,
      }}
    >
      <Box pt="m">
        <Icon Asset={icons.SvgPolyText} width={188} color="brandMain" />
      </Box>
      <Flex justifyContent="space-between">
        <Box pt="xxl" pb="xxxl" width="50%">
          <PolyAlertSvg style={{ marginLeft: -20 }} />
          <Heading variant="h4" mb="m" id="extension_page_heading">
            {t('Extension.header', { appName })}
          </Heading>
          <Paragraph color="gray.2" mb="s">
            {t('Extension.p1', { appName })}
          </Paragraph>
          <Paragraph color="gray.2" mb="s">
            {t('Extension.p2', { appName })}
          </Paragraph>
          <Paragraph color="gray.2" mb="m">
            {t('Extension.p3', { appName })}
          </Paragraph>
          <Flex>
            <Flex mr="l">
              <Button id="extension_page_connect_button" onClick={connect}>
                <IconCircled
                  Asset={icons.SvgPoly}
                  width={24}
                  height={24}
                  scale={0.9}
                  color="brandMain"
                  mr="s"
                />
                {t('Extension.connectWallet')}
              </Button>
            </Flex>
            <Button
              variant="secondary"
              id="extension_page_install_button"
              href={installUrl}
              as="a"
              target="_blank"
              rel="noreferrer noopener"
            >
              {t('Extension.installWallet')}
            </Button>
          </Flex>
        </Box>
        <PolyWalletSvg style={{ marginTop: 100 }} />
      </Flex>
    </PageWrap>
  );
};
