import { useSwapContext } from "@src/context";
import { useMemo } from "react";
import { SwapPanelType } from "../index";
import { AmountPanel } from "./AmountPanel";
import { ChainPanel } from "./ChainPanel";
import { MaxPanel } from "./MaxPanel";
import { TokenPanel } from "./TokenPanel";
import { WalletPanel } from "./WalletPanel";

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

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

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

  return (
    <div className="flex flex-col x-border rounded-xl bg-t_bg_tertiary bg-opacity-5">
      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
        <WalletPanel chain={chain} type={type} className="w-full flex-grow" />
      </div>
      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
        <TokenPanel
          chain={chain}
          token={token}
          type={type}
          className="w-full flex-grow"
        />
        <ChainPanel
          chain={chain}
          type={type}
          className="w-full max-w-[160px]"
        />
      </div>
      <div
        className={`flex justify-between rounded-b-[11px] ${
          type === "destination" &&
          "bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20"
        }`}
      >
        <AmountPanel type={type} />
        <MaxPanel type={type} />
      </div>
    </div>
  );
};