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

export const WrongNetworkPage: FC<any> = ({ mainPath, apiConfig }) => {
  const { t } = useTranslation();

  const cleanUrl = apiConfig.polyWssNodeUrl.replace(/\/$/, '');
  const supportedNetworkName = nameByUrl[cleanUrl].toUpperCase();

  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%">
            <PolyWarningSvg style={{ marginLeft: -20 }} />
            <Heading variant="h4" mb="m">
              {t('WrongNetwork.heading', { supportedNetworkName })}
            </Heading>
            <Paragraph color="gray.2" mb="m">
              {t('WrongNetwork.instruction', { supportedNetworkName })}
            </Paragraph>

            <Button id="wrong_network_connect_button" onClick={connect}>
              <IconCircled
                Asset={icons.SvgPoly}
                width={24}
                height={24}
                scale={0.9}
                color="brandMain"
                mr="s"
              />
              {t('WrongNetwork.connectButton')}
            </Button>
          </Box>
          <PolyWalletSvg />
        </Flex>
      </PageWrap>
      <Footer links={footerLinks} />
    </>
  );
};
