import { TokenList } from "@uniswap/token-lists/dist/types";
import React from "react";
import { Token, Currency } from "@uniswap/sdk-core";
import styled from "styled-components/macro";
import { TYPE, CloseIcon } from "../../theme";
import Card from "../Card";
import { AutoColumn } from "../Column";
import { RowBetween, RowFixed } from "../Row";
import CurrencyLogo from "../CurrencyLogo";
import { ArrowLeft, AlertCircle } from "react-feather";
import { transparentize } from "polished";
import useTheme from "../../hooks/useTheme";
import { ButtonPrimary } from "../Button";
import { SectionBreak } from "../order/styleds";
import { useAddUserToken } from "../../state/guser/hooks";
import { useWeb3 } from "../../web3";
import { ExternalLink } from "../../theme/components";
import ListLogo from "../ListLogo";
import { ExplorerDataType, getExplorerLink } from "../../utils/getExplorerLink";
import { PaddedColumn } from "./styleds";

const Wrapper = styled.div`
  position: relative;
  width: 100%;
  overflow: auto;
`;

const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
  background-color: ${({ theme, highWarning }) =>
    highWarning
      ? transparentize(0.8, theme.red1)
      : transparentize(0.8, theme.yellow2)};
  width: fit-content;
`;

const AddressText = styled(TYPE.blue)`
  font-size: 12px;

  ${({ theme }) => theme.mediaWidth.upToSmall`
    font-size: 10px;
`}
`;

interface ImportProps {
  tokens: Token[];
  list?: TokenList;
  onBack?: () => void;
  onDismiss?: () => void;
  handleCurrencySelect?: (currency: Currency) => void;
}

export function ImportToken({
  tokens,
  list,
  onBack,
  onDismiss,
  handleCurrencySelect,
}: ImportProps) {
  const theme = useTheme();

  const { chainId } = useWeb3();

  const addToken = useAddUserToken();

  return (
    <Wrapper>
      <PaddedColumn gap="14px" style={{ width: "100%", flex: "1 1" }}>
        <RowBetween>
          {onBack ? (
            <ArrowLeft style={{ cursor: "pointer" }} onClick={onBack} />
          ) : (
            <div />
          )}
          <TYPE.mediumHeader>
            Import {tokens.length > 1 ? "Tokens" : "Token"}
          </TYPE.mediumHeader>
          {onDismiss ? <CloseIcon onClick={onDismiss} /> : <div />}
        </RowBetween>
      </PaddedColumn>
      <SectionBreak />
      <AutoColumn gap="md" style={{ marginBottom: "32px", padding: "1rem" }}>
        <AutoColumn
          justify="center"
          style={{ textAlign: "center", gap: "16px", padding: "1rem" }}
        >
          <AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
          <TYPE.body fontWeight={400} fontSize={16}>
            {
              "This token doesn't appear on the active token list(s). Make sure this is the token that you want to trade."
            }
          </TYPE.body>
        </AutoColumn>
        {tokens.map((token) => {
          return (
            <Card
              backgroundColor={theme.bg2}
              key={"import" + token.address}
              className=".token-warning-container"
              padding="2rem"
            >
              <AutoColumn gap="10px" justify="center">
                <CurrencyLogo currency={token} size={"32px"} />

                <AutoColumn gap="4px" justify="center">
                  <TYPE.body ml="8px" mr="8px" fontWeight={500} fontSize={20}>
                    {token.symbol}
                  </TYPE.body>
                  <TYPE.darkGray fontWeight={400} fontSize={14}>
                    {token.name}
                  </TYPE.darkGray>
                </AutoColumn>
                {chainId && (
                  <ExternalLink
                    href={getExplorerLink(
                      chainId,
                      token.address,
                      ExplorerDataType.ADDRESS
                    )}
                  >
                    <AddressText fontSize={12}>{token.address}</AddressText>
                  </ExternalLink>
                )}
                {list !== undefined ? (
                  <RowFixed>
                    {list.logoURI && (
                      <ListLogo logoURI={list.logoURI} size="16px" />
                    )}
                    <TYPE.small ml="6px" fontSize={14} color={theme.text3}>
                      via {list.name} token list
                    </TYPE.small>
                  </RowFixed>
                ) : (
                  <WarningWrapper
                    borderRadius="4px"
                    padding="4px"
                    highWarning={true}
                  >
                    <RowFixed>
                      <AlertCircle stroke={theme.red1} size="10px" />
                      <TYPE.body
                        color={theme.red1}
                        ml="4px"
                        fontSize="10px"
                        fontWeight={500}
                      >
                        Unknown Source
                      </TYPE.body>
                    </RowFixed>
                  </WarningWrapper>
                )}
              </AutoColumn>
            </Card>
          );
        })}

        <ButtonPrimary
          altDisabledStyle={true}
          borderRadius="20px"
          padding="10px 1rem"
          onClick={() => {
            tokens.map((token) => addToken(token));
            handleCurrencySelect && handleCurrencySelect(tokens[0]);
          }}
          className=".token-dismiss-button"
        >
          Import
        </ButtonPrimary>
      </AutoColumn>
    </Wrapper>
  );
}