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

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

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

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

  return (
    <div style={{ background: theme.colors.gradient }}>
      <PageWrap>
        <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('header', { appName })}
            </Heading>
            <Paragraph color="gray.2" mb="s">
              {t('p1', { appName })}
            </Paragraph>
            <Paragraph color="gray.2" mb="s">
              {t('p2', { appName })}
            </Paragraph>
            <Paragraph color="gray.2" mb="m">
              {t('p3', { appName })}
            </Paragraph>
            <Flex mt="40px">
              <Flex mr="m">
                <ButtonLarge
                  id="extension_page_connect_button"
                  onClick={connect}
                  style={{ padding: '0.75rem 1rem' }}
                >
                  <IconCircled
                    Asset={icons.SvgPolyNew}
                    width={24}
                    height={24}
                    scale={0.9}
                    color="brandMain"
                    mr="s"
                  />
                  {t('connectWallet')}
                </ButtonLarge>
              </Flex>
              <ButtonLarge
                variant="secondary"
                id="extension_page_install_button"
                href={installUrl}
                as="a"
                target="_blank"
                rel="noreferrer noopener"
              >
                {t('installWallet')}
              </ButtonLarge>
            </Flex>
          </Box>
          <PolyWalletSvg style={{ marginTop: 100 }} />
        </Flex>
      </PageWrap>
      <Footer />
    </div>
  );
};
