import { useNavigate } from "react-router-dom";
import { Tx4Shift } from "../../features/Tx4Shift";
import { useSwapContext } from "@src/contexts";
import {
  DepositAndBuyStatus,
  ProcessingState,
  RoutePath,
} from "@src/interfaces";
import { Navigation, PageLayout } from "@src/components";
import { CloseIcon } from "@src/assets";
import { DepositAndBuySteps } from "@src/features";

export const DepositLackingFundsView = () => {
  const {
    cashAmount,
    setTransactionHash,
    setTransactionState,
    fetchAllBalances,
    setIsDepositAndBuyFlow,
  } = useSwapContext();
  const navigate = useNavigate();
  return (
    <PageLayout
      navigation={
        <Navigation
          leftItems={[
            {
              content: (
                <DepositAndBuySteps
                  status={DepositAndBuyStatus.DepositPending}
                />
              ),
              isCustomContent: true,
            },
          ]}
          rightItems={[
            {
              content: <CloseIcon />,
              onClick: () => {
                fetchAllBalances();
                setIsDepositAndBuyFlow(false);
                navigate(-1);
              },
            },
          ]}
        />
      }
    >
      <Tx4Shift
        amount={cashAmount}
        onChainlinkDepositComplete={() => {
          navigate(RoutePath.Processing);
          setTransactionHash("");
          setTransactionState(ProcessingState.Pending);
        }}
      />
    </PageLayout>
  );
};