import { WarningIcon } from "@src/assets";
import { TokenLogo } from "@src/components";
import { useSwapContext } from "@src/contexts";
import { TokenWithChain } from "@src/models";
import { ethers } from "ethers";
import { useMemo } from "react";

interface Props {
  token?: TokenWithChain;
  amount: string;
}

export const ChainlinkSwapFailedView = ({ token, amount }: Props) => {
  const { allTokens, chain } = useSwapContext();
  const nativeToken = useMemo(() => {
    return allTokens.find(
      (token_) =>
        token_.chainId === token?.chainId &&
        token_.address === ethers.constants.AddressZero,
    );
  }, [allTokens, token]);

  return (
    <div className="flex flex-col gap-5 w-full items-center justify-center">
      <WarningIcon className="w-[50px] h-[50px]" />

      <div className="flex flex-col">
        <p className="text-2xl font-bold text-text_primary text-center">
          Swap failed due to slippage, deposit&nbsp;successful
        </p>
        <div className="text-md text-text_primary text-center">
          Try to swap again
        </div>
      </div>
      <div className="bg-card_bg rounded-[12px] h-[90px] flex w-full items-center justify-center">
        <div className="flex gap-2 items-end">
          <div className="font-bold text-text_primary text-[30px]">
            {amount}
          </div>

          <div className="flex gap-1 items-end">
            <TokenLogo
              token={nativeToken!}
              tokenLogoClassName="w-6 min-w-6 h-6"
              unknownTokenLogoClassName="w-6 min-w-6 h-6 text-[14px]"
              chain={chain}
            />
            <div className="text-xs font-medium text-text_primary leading-3">
              {nativeToken?.symbol}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};