import { SafeInput, Skeleton } from "@src/components";
import {
  CASH_TOKEN_ADDRESS_BY_CHAIN,
  DEFAULT_CHAIN_ID,
  NUMBER_INPUT_REGEX,
} from "@src/config";
import { useSwapContext } from "@src/contexts";
import { PickerType, TokenPanel } from "@src/features";
import { useMemo } from "react";

interface Props {
  type: "source" | "destination";
}

export const CashAmountPanel = ({ type }: Props) => {
  const isFetchingBridgeRoute = false;

  const {
    chain,
    cashBridgeChain,
    chainToTokenOptionsMap,
    setCashBridgeAmount,
    cashBridgeAmount,
    estimatedCashOutAmount,
  } = useSwapContext();

  const sourceToken = useMemo(() => {
    return chainToTokenOptionsMap[chain?.chainId || DEFAULT_CHAIN_ID]?.find(
      (t) =>
        t.address ===
        CASH_TOKEN_ADDRESS_BY_CHAIN[chain?.chainId || DEFAULT_CHAIN_ID],
    );
  }, [chain, chainToTokenOptionsMap]);

  const destinationToken = useMemo(() => {
    if (!cashBridgeChain) return undefined;

    return chainToTokenOptionsMap[cashBridgeChain?.chainId]?.find(
      (t) => t.address === CASH_TOKEN_ADDRESS_BY_CHAIN[cashBridgeChain.chainId],
    );
  }, [cashBridgeChain, chainToTokenOptionsMap]);

  return (
    <div className="flex items-center w-full p-5 h-[80px] overflow-hidden">
      <div className="flex flex-col font-medium w-full overflow-hidden">
        {type === "source" ? (
          <div className="flex justify-between gap-2 items-center">
            <div className="flex flex-1">
              <SafeInput
                id="swap-amount-input"
                // NOTE: used in e2e tests — do not remove
                data-testid="swap-token-amount-input"
                className={`bg-transparent border-none p-0 text-2xl font-bold placeholder:text-2xl placeholder:lh placeholder:text-text_primary placeholder:text-opacity-60 outline-0 w-full`}
                regex={NUMBER_INPUT_REGEX(sourceToken?.decimals || 6)}
                value={cashBridgeAmount}
                onChange={(value) => {
                  setCashBridgeAmount(value);
                }}
                placeholder="$0"
                prefix={"$"}
              />
            </div>
            <TokenPanel
              token={sourceToken!}
              showChain={true}
              pickerType={PickerType.Cash}
              type={type}
              onMaxClick={(balance) => {
                setCashBridgeAmount(balance);
              }}
            />
          </div>
        ) : (
          <>
            <div className="flex justify-between gap-2 items-center">
              {isFetchingBridgeRoute ? (
                <div className="flex flex-col gap-1">
                  <Skeleton className="w-[150px] h-[28px]" />
                </div>
              ) : (
                <div
                  className={`flex flex-1 text-2xl font-bold text-left text-text_primary`}
                >
                  ${estimatedCashOutAmount || 0}
                </div>
              )}

              <TokenPanel
                showChain={true}
                token={destinationToken!}
                type={type}
                pickerType={PickerType.Cash}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
};