import { useState } from "react";
import { observer } from "mobx-react-lite";
import styled from "styled-components";

import { formatter } from "../../omni/utils";
import { Token } from "../../omni/token";
import { HotConnector } from "../../HotConnector";
import { OmniWallet } from "../../OmniWallet";
import { Network, OmniToken } from "../../omni/config";
import { PopupOption } from "../styles";
import Popup from "../Popup";

import { TokenCard, ImageView } from "./TokenCard";
import { tokens } from "../../omni/tokens";

interface SelectTokenPopupProps {
  hot: HotConnector;
  initialChain?: number;
  onClose: () => void;
  onSelect: (token: Token, wallet?: OmniWallet) => void;
}

export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect }: SelectTokenPopupProps) => {
  const [chain, setChain] = useState<number | null>(initialChain || null);
  const [search, setSearch] = useState<string>("");

  if (chain == null) {
    const chains: Record<number, { chain: number; balance: number; name: string; icon: string }> = {};
    tokens.list.forEach((token) => {
      if (!chains[token.chain])
        chains[token.chain] = {
          chain: token.chain,
          name: token.chainName,
          icon: token.chainIcon,
          balance: 0,
        };

      hot.wallets.forEach((wallet) => {
        const balance = hot.balance(wallet, token);
        chains[token.chain].balance += token.float(balance) * token.usd;
      });
    });

    const sorted = Object.values(chains).sort((a, b) => {
      if (a.chain === Network.Hot) return -1;
      return b.balance - a.balance;
    });

    return (
      <Popup onClose={onClose} header={<p>Select chain</p>} style={{ minHeight: 300 }}>
        <SearchInput type="text" placeholder="Search chain" onChange={(e) => setSearch(e.target.value)} />

        {sorted.map(({ chain, balance, name, icon }) => {
          if (search && !name.toLowerCase().includes(search.toLowerCase())) return;

          return (
            <PopupOption onClick={() => (setChain(chain), setSearch(""))}>
              <ImageView src={icon} alt={name} size={24} />
              <p style={{ fontSize: 24, fontWeight: "bold" }}>{name}</p>
              {balance > 0 && <p style={{ marginLeft: "auto", fontSize: 20, color: "#c6c6c6" }}>${formatter.amount(balance)}</p>}
            </PopupOption>
          );
        })}
      </Popup>
    );
  }

  if (chain !== -4) {
    return (
      <Popup onClose={onClose} header={<p>Select token</p>} style={{ minHeight: 300 }}>
        <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />

        {tokens.list
          .filter((token) => token.chain === chain)
          .sort((a, b) => {
            const wallet = hot.wallets.find((w) => w.type === a.type)!;
            const aBalance = a.float(hot.balance(wallet, a)) * a.usd;
            const bBalance = b.float(hot.balance(wallet, b)) * b.usd;
            return bBalance - aBalance;
          })
          .map((token) => {
            const wallet = hot.wallets.find((w) => w.type === token.type);
            if (search && !token.symbol.toLowerCase().includes(search.toLowerCase())) return;
            return <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />;
          })}
      </Popup>
    );
  }

  let used = new Set<string>();
  return (
    <Popup onClose={onClose} header={<p>Select token</p>}>
      <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />
      {hot.walletsTokens
        .filter(({ token, balance }) => {
          if (token.chain !== Network.Hot) return false;
          if (token.float(balance) < 0.0001) return false;
          if (!token.symbol.toLowerCase().includes(search.toLowerCase())) return false;
          used.add(token.address);
          return true;
        })
        .sort((a, b) => {
          const aBalance = a.token.float(a.balance) * a.token.usd;
          const bBalance = b.token.float(b.balance) * b.token.usd;
          return bBalance - aBalance;
        })
        .map(({ token, wallet }) => (
          <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />
        ))}

      {Object.values(OmniToken)
        .filter((token) => !used.has(token))
        .map((token) => (
          <TokenCard key={token} token={hot.omni(token)} onSelect={onSelect} hot={hot} wallet={hot.priorityWallet} />
        ))}
    </Popup>
  );
});

const SearchInput = styled.input`
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid #282c30;
  background: #282c30;
  color: #fff;
  outline: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
  text-align: left;
  margin-bottom: 8px;
`;