import { ArrowDownIcon } from "@src/assets/icons";
import { TokenLogo } from "@src/components";
import { Modal } from "@src/components/Modal";
import { useSwapContext } from "@src/context";
import { Chain, Token, TokenOption } from "@src/models";
import { useMemo, useState } from "react";
import { SwapPanelType } from "../../index";
import { TokenPicker } from "./TokenPicker";

type Props = {
  chain: Chain | undefined;
  token: Token | undefined;
  type: SwapPanelType;
};

export const TokenPanel = ({ chain, token, type }: Props) => {
  const {
    srcChainTokensOptions,
    srcChainOtherTokensOptions,
    dstChainTokensOptions,
    dstChainOtherTokensOptions,
    setSrcToken,
    setSrcChain,
    supportedChains,
    setDstToken,
    setDstChain,
  } = useSwapContext();

  const [tokenPickerModalOpen, setTokenPickerModalOpen] = useState(false);

  const tokensWithBalances = useMemo(
    () => (type === "source" ? srcChainTokensOptions : dstChainTokensOptions),
    [dstChainTokensOptions, srcChainTokensOptions, type],
  );

  const otherTokensWithBalances = useMemo(
    () =>
      type === "source"
        ? srcChainOtherTokensOptions
        : dstChainOtherTokensOptions,
    [dstChainOtherTokensOptions, srcChainOtherTokensOptions, type],
  );

  const onTokenSelect = (token: TokenOption) => {
    const newChain = supportedChains.find(
      (chain) => chain.chainId === token.chainId,
    );

    if (type === "source") {
      setSrcToken(token);
      setSrcChain(newChain);
    } else {
      setDstToken(token);
      setDstChain(newChain);
    }
    setTokenPickerModalOpen(false);
  };

  return (
    <>
      {tokenPickerModalOpen && (
        <Modal onClose={() => setTokenPickerModalOpen(false)}>
          <TokenPicker
            chain={chain!}
            tokens={tokensWithBalances}
            otherTokens={otherTokensWithBalances}
            selectedTokenAddress={token?.address}
            onSelect={onTokenSelect}
            isOpen={tokenPickerModalOpen}
            setModalOpen={setTokenPickerModalOpen}
          />
        </Modal>
      )}

      <button
        type="button"
        onClick={() => setTokenPickerModalOpen(true)}
        className="w-full flex-grow"
      >
        <div className="flex justify-between items-center p-4 gap-8 border-r border-solid border-t_text_primary border-opacity-10">
          <div className="flex gap-2 items-center">
            <TokenLogo
              token={token}
              className="w-[34px] h-[34px]"
              generatedLogoClassName=" text-[16px]"
            />
            <div className="flex flex-col font-medium items-start">
              <p className="text-xs opacity-60">Token: </p>
              <p className={`${token ? "" : "opacity-60"}`}>
                {token ? token.symbol : "Select"}
              </p>
            </div>
          </div>
          <div className="w-4 h-2 fill-t_text_primary">
            <ArrowDownIcon />
          </div>
        </div>
      </button>
    </>
  );
};