import { useTxUIWrapper } from "@src/context";
import { TxStatus } from "@src/models";
import { Header } from "./Header";
import { SwapPanelOverview } from "./SwapPanelOverview";
import { Tx4Shift } from "../Tx4Shift";
import { WaitingIcon } from "@src/assets/icons";

type Props = {
  onCloseClick: () => void;
};

export const TxOverview = ({ onCloseClick }: Props) => {
  const { txStatus, txMsg } = useTxUIWrapper();

  return (
    <div className="flex flex-col gap-4">
      <Header onCloseClick={onCloseClick} />
      <div className="flex gap-3 items-center">
        <div className="flex flex-col text-white gap-2 w-64">
          {txMsg ? (
            <div>{txMsg}</div>
          ) : (
            <>
              <div className="relative flex flex-col gap-2 bg-t_bg_tertiary bg-opacity-10 rounded-xl p-4">
                <SwapPanelOverview type="source" />
                <div className="ml-6 w-[1px] h-6 bg-t_theme_color"></div>
                <SwapPanelOverview type="middle" />
                <div className="ml-6 w-[1px] h-6 bg-t_theme_color"></div>
                <SwapPanelOverview type="destination" />
              </div>
            </>
          )}
        </div>

        {txStatus === TxStatus.SWAP_INIT ? (
          <Tx4Shift />
        ) : (
          <div className="w-[320px] h-[480px] flex flex-col gap-6 items-center justify-center">
            <WaitingIcon className="w-20 h-20 animate-spin-slow" />
            <p className="w-3/4 text-lg text-center">
              Please wait while we swap the tokens for you
            </p>
          </div>
        )}
      </div>
    </div>
  );
};