/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { useCallback, useState, useEffect, useRef } from 'react';
import { useEarnContext } from './YoarnProvider';
import { cn } from '../styles/theme';
import { ConnectWallet } from '@coinbase/onchainkit/wallet';
import {
  LifecycleStatus,
  Transaction,
  TransactionButton,
  TransactionResponseType,
} from '@coinbase/onchainkit/transaction';

export function DepositButton({ className }: any) {
  const {
    recipientAddress: address,
    chainId,
    vaultToken,
    depositCalls,
    depositAmount,
    depositAmountError,
    updateLifecycleStatus,
    refetchWalletBalance,
    isSponsored,
    lifecycleStatus,
  } = useEarnContext();
  const [depositedAmount, setDepositedAmount] = useState('');
  const [transactionKey, setTransactionKey] = useState(0);
  const wasErrorRef = useRef(false);

  // Reset Transaction component when amount changes after an error
  useEffect(() => {
    if (lifecycleStatus?.statusName === 'error') {
      wasErrorRef.current = true;
    } else if (wasErrorRef.current && depositAmount) {
      // Amount changed after error, reset the transaction
      wasErrorRef.current = false;
      setTransactionKey((prev) => prev + 1);
    }
  }, [depositAmount, lifecycleStatus?.statusName]);

  const handleOnStatus = useCallback(
    (status: LifecycleStatus) => {
      if (status.statusName === 'transactionPending') {
        updateLifecycleStatus({ statusName: 'transactionPending' });
      }

      if (
        status.statusName === 'transactionLegacyExecuted' ||
        status.statusName === 'success' ||
        status.statusName === 'error'
      ) {
        updateLifecycleStatus(status);
      }
    },
    [updateLifecycleStatus],
  );

  const handleOnSuccess = useCallback(
    (res: TransactionResponseType) => {
      if (
        res.transactionReceipts[0] &&
        res.transactionReceipts[0].status === 'success'
      ) {
        // Don't overwrite to '' when the second txn comes in
        if (depositAmount) {
          setDepositedAmount(depositAmount);
        }
        refetchWalletBalance();
      }
    },
    [depositAmount, refetchWalletBalance],
  );

  if (!address) {
    return (
      <ConnectWallet
        className={cn('w-full', className)}
        disconnectedLabel='Connect to deposit'
      />
    );
  }

  return (
    <Transaction
      key={transactionKey}
      className={className}
      chainId={chainId}
      calls={depositCalls}
      onStatus={handleOnStatus}
      onSuccess={handleOnSuccess}
      isSponsored={isSponsored}
      resetAfter={3_000}
    >
      <TransactionButton
        disabled={!!depositAmountError || !depositAmount}
        render={({ status, onSubmit, isDisabled }) => (
          <button
            onClick={status === 'success' ? undefined : onSubmit}
            disabled={isDisabled || status === 'success'}
            className='w-full rounded-xl bg-[#D1F651] py-4 font-bold text-black disabled:opacity-50'
          >
            {status === 'pending' && 'Processing...'}
            {status === 'success' &&
              `Deposited ${depositedAmount} ${vaultToken?.symbol}`}
            {status === 'error' && 'Try Again'}
            {status === 'default' && (depositAmountError ?? 'Deposit')}
          </button>
        )}
      />
    </Transaction>
  );
}