import { ArrowLeftIcon, CheckIcon, XSwapLogo } from "@src/assets/icons";
import { xpayTxStatusRoot } from "@src/config";
import { Chain, Token, Transaction } from "@src/models";
import { FC, useMemo, useState } from "react";
import { Spinner } from "../Spinner";
import { TxDataCardUI } from "../TxDataCard/TxDataCardUI";

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

export const TxStatusButton: FC<Props> = ({
  transaction,
  supportedChains,
  srcToken,
  dstToken,
}) => {
  const [isWide, setIsWide] = useState(false);

  const background = useMemo(
    () =>
      transaction?.status === "DONE"
        ? "bg-t_bg_primary bg-gradient-to-r from-t_success_light/20 to-t_success_dark/20"
        : "bg-t_bg_primary bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20]",
    [transaction],
  );

  const border = useMemo(
    () =>
      transaction?.status === "DONE"
        ? "border border-solid border-t_success_dark"
        : "border border-solid border-t_main_accent_dark",
    [transaction],
  );

  return (
    <div
      className="flex gap-2 items-end justify-end flex-wrap"
      onClick={() => setIsWide((x: boolean) => !x)}
    >
      {isWide && (
        <TxDataCardUI
          transaction={transaction}
          supportedChains={supportedChains}
          srcToken={srcToken}
          dstToken={dstToken}
        />
      )}
      <div
        className={`text-t_text_primary rounded-xl h-14 w-20  mb-2 cursor-pointer ${background} ${border}`}
      >
        <div className="flex gap-2 items-center h-14 w-20 justify-center fill-t_text_primary">
          <div className={`${isWide ? "rotate-180" : ""}`}>
            <ArrowLeftIcon />
          </div>
          <div className="relative flex items-center justify-center w-9 h-9">
            {transaction?.status === "DONE" ? (
              <div className="w-5 h-5 fill-t_success_dark">
                <CheckIcon />
              </div>
            ) : (
              <>
                <div className="w-5 h-5">
                  <XSwapLogo />
                </div>
                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-t_text_primary">
                  <Spinner className="w-10 h-10" />
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

let renderedTransactions: Props[] = [];

export const addTransactionToRenderedTransactions = (transaction: Props) => {
  if (
    !renderedTransactions.some(
      ({ transaction }) => transaction.hash === transaction.hash,
    )
  )
    renderedTransactions.push(transaction);
};

export const removeTransactionFromRenderedTransactions = (hash: string) => {
  const filteredRenderedTransactions = renderedTransactions.filter(
    (item) => item.transaction.hash !== hash,
  );
  renderedTransactions = [...filteredRenderedTransactions];
};

export const updateTransactionDoneInRenderedTransactions = (hash: string) => {
  renderedTransactions = renderedTransactions.map((item) => {
    if (item.transaction.hash === hash) {
      return {
        ...item,
        transaction: {
          ...item.transaction,
          status: "DONE",
        },
      };
    }
    return item;
  });
};

export const renderTxStatusButtons = () => {
  const buttons = renderedTransactions.map((item) => (
    <TxStatusButton key={item.transaction.hash} {...item} />
  ));

  if (xpayTxStatusRoot === null) {
    throw new Error("XPay was incorrectly initialized");
  }

  xpayTxStatusRoot.render(
    <div className="fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50">
      {buttons}
    </div>,
  );
};