import React, { FC, useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { formatters } from '../../shared';

import * as sc from './styles';
import { PageWrap } from '../PageWrap';
import { Box } from '../Box';
import { Text } from '../Text';
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,
  SvgPolyX,
  SvgAccount,
  SvgToken,
} from '../../assets/images/icons';
import { HeaderProps } from './HeaderProps';

export const Header: FC<HeaderProps> & {
  defaultProps: { variant: 'default' };
} = (props: HeaderProps) => {
  const [copied, setCopied] = useState(false);
  const {
    balance,
    walletAddress,
    network,
    symbol,
    logo,
    variant,
    RouterLink,
    children,
    right,
    logoLink = '/',
  } = props;
  const formattedBalance = balance
    ? typeof balance === 'string'
      ? balance
      : formatters.toTokens(balance)
    : '...';

  const handleCopyClick = () => {
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 2000);
  };

  return (
    <sc.Wrapper className="pui-header" variant={variant}>
      <PageWrap>
        <sc.Inner>
          <Link
            {...(RouterLink
              ? { as: RouterLink, to: logoLink }
              : { href: logoLink })}
          >
            {logo ? (
              <Block as="img" src={logo} alt="Company Logo" width="188" />
            ) : (
              <Block as="img" src={polyLogo} alt="Polymath" width="188" />
            )}
          </Link>
          {children && <InlineFlex>{children}</InlineFlex>}
          {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}
                  />
                  <Text variant="b3m" color="gray.2">
                    {network}
                  </Text>
                </IconText>
                {balance && (
                  <IconText as="li">
                    <IconCircled
                      Asset={SvgPolyX}
                      aria-label="Your POLYX balance"
                      bg="brandLightest"
                      color="brandMain"
                      width={26}
                      height={26}
                      scale={0.85}
                    />
                    <InlineFlex ml="s">
                      <sc.Balance>{formattedBalance}</sc.Balance> POLYX
                    </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">
                    <CopyToClipboard text={walletAddress}>
                      <sc.CopyText
                        variant="b2m"
                        color="gray.2"
                        onClick={handleCopyClick}
                        copied={copied}
                      >
                        {formatters.toShortAddress(walletAddress, {
                          size: 14,
                        })}
                      </sc.CopyText>
                    </CopyToClipboard>
                  </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}
          {right}
        </sc.Inner>
      </PageWrap>
    </sc.Wrapper>
  );
};

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