import React, { FC } from 'react';
import BigNumber from 'bignumber.js';
import { formatters } from '../../shared';

import * as sc from './styles';

import { PageWrap } from '../PageWrap';
import { Box } from '../Box';
import { Block } from '../Block';
import { Icon } from '../Icon';
import { IconCircled } from '../IconCircled';
import { Link } from '../Link';
import { List } from '../List';
import { IconText } from '../IconText';
import { InlineFlex } from '../InlineFlex';
import polyLogo from '../../assets/images/logo.svg';
import {
  SvgDot,
  SvgPoly,
  SvgAccount,
  SvgToken,
} from '../../assets/images/icons';

export interface HeaderProps {
  network: string;
  walletAddress?: string;
  balance?: BigNumber;
  variant: 'default' | 'transparent';
  symbol?: string;
  logo?: string;
  RouterLink: React.ComponentType<any>;
}

export const Header: FC<HeaderProps> & {
  defaultProps: { variant: 'default' };
} = props => {
  const {
    balance,
    walletAddress,
    network,
    symbol,
    logo,
    variant,
    RouterLink,
  } = props;
  return (
    <sc.Wrapper className="pui-header" variant={variant}>
      <PageWrap>
        <sc.Inner>
          <Link as={RouterLink} href="/">
            {logo ? (
              <Block as="img" src={logo} alt="Company Logo" width="188" />
            ) : (
              <Block as="img" src={polyLogo} alt="Polymath" width="188" />
            )}
          </Link>
          {walletAddress ? (
            <Box ml="auto">
              <List horizontal className="pui-header-menu">
                <IconText as="li">
                  <Icon
                    Asset={SvgDot}
                    aria-label="Active network"
                    color="success"
                    width={26}
                    height={26}
                  />
                  <InlineFlex ml="s">{network}</InlineFlex>
                </IconText>
                <IconText as="li">
                  <IconCircled
                    Asset={SvgPoly}
                    aria-label="Your POLY balance"
                    bg="brandLightest"
                    color="brandMain"
                    width={26}
                    height={26}
                    scale={0.85}
                  />
                  <InlineFlex ml="s">
                    {balance ? `${formatters.toTokens(balance)} POLY` : '...'}
                  </InlineFlex>
                </IconText>
                <IconText as="li">
                  <IconCircled
                    Asset={SvgAccount}
                    aria-label="Wallet address"
                    bg="brandLightest"
                    color="brandMain"
                    width={26}
                    height={26}
                    scale={0.75}
                  />
                  <InlineFlex ml="s">
                    {formatters.toShortAddress(walletAddress)}
                  </InlineFlex>
                </IconText>
                {symbol ? (
                  <IconText as="li">
                    <IconCircled
                      Asset={SvgToken}
                      aria-label="Token"
                      bg="brandLightest"
                      color="brandMain"
                      width={26}
                      height={26}
                      scale={0.85}
                    />
                    <InlineFlex ml="s">{symbol}</InlineFlex>
                  </IconText>
                ) : (
                  ''
                )}
              </List>
            </Box>
          ) : null}
        </sc.Inner>
      </PageWrap>
    </sc.Wrapper>
  );
};

Header.defaultProps = {
  variant: 'default',
};
