import { TokenLogo } from "@src/components";
import { useSwapContext } from "@src/context";
import { SwapPanelType } from "../../../index";
import { useMemo } from "react";
import { Ecosystem } from "@src/models";

type Props = {
  type: SwapPanelType;
};
export const SwapPanel = ({ type }: Props) => {
  const {
    srcToken,
    srcChain,
    dstToken,
    dstChain,
    srcValue,
    srcValueUsd,
    dstValue,
    dstValueUsd,
    bridgeUI,
  } = useSwapContext();

  const token = useMemo(
    () => (type === "source" ? srcToken : dstToken),
    [dstToken, srcToken, type],
  );

  const chain = useMemo(
    () => (type === "source" ? srcChain : dstChain),
    [dstChain, srcChain, type],
  );

  const value = useMemo(() => {
    if (
      type === "destination" &&
      bridgeUI &&
      srcChain?.ecosystem === Ecosystem.SOLANA
    ) {
      return srcValue;
    }
    return type === "source" ? srcValue : dstValue;
  }, [type, bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);

  const valueUsd = useMemo(() => {
    return type === "source" ? srcValueUsd : dstValueUsd;
  }, [dstValueUsd, srcValueUsd, type]);

  return (
    <div className="flex justify-between bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20 p-5 rounded-xl">
      <div className="flex flex-col">
        <div className="opacity-60 text-sm mb-2">{`You ${
          type === "source" ? "pay" : "receive"
        }`}</div>
        <div className={`${type === "destination" && "text-t_text_secondary"}`}>
          {value}
        </div>
        {valueUsd && <div className="opacity-60">${valueUsd}</div>}
      </div>
      <div className="flex items-center gap-3">
        <div className="flex flex-col text-right">
          <div>{token?.symbol}</div>
          <div className="opacity-60">{chain?.displayName}</div>
        </div>
        <TokenLogo
          token={token}
          className="w-9 h-9"
          generatedLogoClassName="w-9 h-9"
        />
      </div>
    </div>
  );
};