import {
  faArrowRight,
  faArrowUpRightFromSquare,
  faHourglassHalf,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Timer, TimerDisplayFormat } from "@src/components";
import { CCIP_EXPLORER } from "@src/constants";
import { Chain, Token, Transaction } from "@src/models";
import { weiToHumanReadable } from "@src/utils";
import { format } from "date-fns";
import { useCallback } from "react";
import { TokenDetails } from "../TokenDetails";

interface Props {
  transaction: Transaction;
  supportedChains: Chain[];
  srcToken?: Token;
  dstToken?: Token;
}

export const TxDataCardUI = ({
  transaction,
  supportedChains,
  srcToken,
  dstToken,
}: Props) => {
  const getDate = useCallback((blockTimestamp: number) => {
    // JS uses ms in timestamps
    return format(new Date(blockTimestamp * 1000), "d MMM yyyy HH:mm:ss");
  }, []);

  const date = getDate(transaction.timestamp);

  const transferredAmount = weiToHumanReadable({
    amount: transaction.amountWei,
    decimals: srcToken?.decimals || 18,
    precisionFractionalPlaces: 4,
  });
  const receivedAmount = weiToHumanReadable({
    amount: transaction?.tokenOutAmount || "0",
    decimals: dstToken?.decimals || 18,
    precisionFractionalPlaces: 4,
  });

  const srcChain = supportedChains.find(
    (chain) => chain.chainId === transaction.sourceChainId,
  );

  const dstChain = supportedChains.find(
    (chain) => chain.chainId === transaction.targetChainId,
  );

  return (
    <div className="flex flex-col border border-t_text_primary border-opacity-10 rounded-lg bg-t_bg_primary p-4 gap-4 mb-2">
      <div className="flex items-center gap-2 border-b border-solid border-t_text_primary border-opacity-10 pb-1">
        <div className="text-xs text-t_text_primary text-opacity-50">
          {date}
        </div>
        <div className="flex grow justify-end items-center h-6">
          {transaction.status === "IN_PROGRESS" ? (
            <div className="flex items-center grow justify-end text-xs">
              <FontAwesomeIcon
                icon={faHourglassHalf}
                className="w-4 h-4 mr-1 text-t_text_orange"
              />
              <div className="text-xs text-t_text_orange min-w-[108px]">
                In progress (
                <Timer
                  displayFormat={TimerDisplayFormat.Minutes}
                  expiryTimestamp={
                    new Date(transaction.estimatedDeliveryTimestamp)
                  }
                  customTextOnExpire="finalizing"
                />
                )
              </div>
            </div>
          ) : transaction.status === "DONE" ? (
            <div className="flex items-center grow justify-end text-xs">
              <div className="mr-1 text-t_text_green">Done</div>
            </div>
          ) : transaction.status === "REVERTED" ? (
            <div className="flex items-center grow justify-end text-xs">
              <div className="mr-1 text-t_text_red">Reverted</div>
            </div>
          ) : null}

          <a
            href={`${
              transaction.messageId
                ? `${CCIP_EXPLORER}${transaction.messageId}`
                : `${
                    supportedChains.find(
                      (chain) => chain.chainId === transaction.sourceChainId,
                    )?.transactionExplorer
                  }/${transaction.hash}`
            } `}
            target="_blank"
            rel="noreferrer"
            className="no-underline ml-1.5 text-t_text_primary"
            aria-label="Show the transaction in the chain explorer"
          >
            <FontAwesomeIcon
              icon={faArrowUpRightFromSquare}
              className="w-[14px] h-[14px] text-t_text_primary"
            />
          </a>
        </div>
      </div>
      <div className="flex flex-wrap gap-8">
        <div className="flex items-center gap-2">
          <TokenDetails
            chain={srcChain}
            token={srcToken}
            amount={transferredAmount}
          />
          {transaction.tokenOutAddress && (
            <>
              <FontAwesomeIcon
                icon={faArrowRight}
                className="w-5 h-5 text-t_text_primary opacity-50 mx-1.5"
              />
              <TokenDetails
                chain={dstChain}
                token={dstToken}
                amount={receivedAmount}
              />
            </>
          )}
        </div>
      </div>
    </div>
  );
};