import { SuccessIcon } from "@src/assets";
import { IconWithTooltip } from "@src/components";
import { useSwapContext } from "@src/contexts";
import { DepositAndBuyStatus } from "@src/interfaces";

export const DepositAndBuySteps = ({
  status,
}: {
  status: DepositAndBuyStatus;
}) => {
  const { isUsingChainlinkFunction, token, displayToken } = useSwapContext();

  return (
    <div className="flex items-center gap-3 font-medium">
      <div className="flex gap-3 items-center">
        {status === DepositAndBuyStatus.DepositPending ? (
          <div className="w-6 h-6 rounded-full bg-theme_color flex items-center justify-center font-bold text-xs text-white">
            1
          </div>
        ) : (
          <SuccessIcon className="w-6 h-6 !fill-theme_color" />
        )}
        <div className="flex gap-1 items-center">
          <p className="text-xs">{`Deposit ${
            isUsingChainlinkFunction ? "ETH" : "Cash"
          }`}</p>
          {isUsingChainlinkFunction && (
            <IconWithTooltip
              id="chainlink-flow-deposit-tooltip"
              tooltipText={`You will first deposit ETH into the smart contract that will be converted into ${token?.symbol} and delivered to your wallet`}
            />
          )}
        </div>
      </div>
      <div
        className={`flex gap-3 items-center ${
          (status === DepositAndBuyStatus.DepositPending ||
            status === DepositAndBuyStatus.DepositSuccess) &&
          "!opacity-30"
        }`}
      >
        <div className="flex items-center justify-center">
          <div
            className={`w-14 h-1 rounded-full bg-theme_color ${
              (status === DepositAndBuyStatus.DepositPending ||
                status === DepositAndBuyStatus.DepositSuccess) &&
              "!bg-bg_text_primary"
            }`}
          />

          {status === DepositAndBuyStatus.SwapSuccess ? (
            <SuccessIcon className="w-6 h-6 -translate-x-1 !fill-theme_color" />
          ) : (
            <div
              className={`w-6 h-6 rounded-full bg-theme_color flex items-center justify-center font-bold text-xs  text-white -translate-x-1 ${
                (status === DepositAndBuyStatus.DepositPending ||
                  status === DepositAndBuyStatus.DepositSuccess) &&
                "!bg-bg_text_primary"
              }`}
            >
              2
            </div>
          )}
        </div>
        <p className="text-xs">{`Buy ${
          displayToken?.symbol || token?.symbol
        }`}</p>
      </div>
    </div>
  );
};