import { useSwapContext } from "@src/context";
import { weiToHumanReadable } from "@src/utils";
import { Fee } from "../Fee";

export const Fees = ({
  solanaBridgeFee,
}: {
  solanaBridgeFee: string | null;
}) => {
  const { route, slippage, feeToken, dstToken, expressDelivery } =
    useSwapContext();

  const fees = [
    {
      name: "CCIP Fee: ",
      value: `${
        solanaBridgeFee
          ? solanaBridgeFee
          : weiToHumanReadable({
              amount: route?.xSwapFees.ccipFee || "0",
              decimals: feeToken?.decimals || 18,
              precisionFractionalPlaces: 5,
            }) || 0
      } ${feeToken?.symbol || ""}`,
    },
    {
      name: "Native Fee: ",
      value: `${
        weiToHumanReadable({
          amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
          decimals: feeToken?.decimals || 18,
          precisionFractionalPlaces: 5,
        }) || 0
      } ${feeToken?.symbol || ""}`,
    },
    ...(expressDelivery
      ? [
          {
            name: "Express delivery Fee: ",
            value: `${
              weiToHumanReadable({
                amount: route?.xSwapFees.expressDeliveryFee || "0",
                decimals: feeToken?.decimals || 18,
                precisionFractionalPlaces: 5,
              }) || 0
            } ${feeToken?.symbol || ""}`,
          },
        ]
      : []),
    { name: "Slippage: ", value: `${slippage}%` },
    {
      name: "Min out: ",
      value: `${
        weiToHumanReadable({
          amount: route?.minAmountOut || "0",
          decimals: dstToken?.decimals || 18,
          precisionFractionalPlaces: 5,
        }) || 0
      } ${dstToken?.symbol || ""}`,
    },
  ];

  return (
    <div className="border-t border-solid border-t_text_primary border-opacity-10 pt-3 mt-3">
      <div
        className={`flex flex-col gap-y-2 gap-x-10 sm:grid ${
          fees.length === 4 ? "sm:grid-rows-2" : "sm:grid-rows-3"
        } sm:grid-flow-col`}
      >
        {fees.map(({ name, value }) => (
          <Fee key={name} name={name} value={value} />
        ))}
      </div>
    </div>
  );
};