// import { ChainId, ChainType } from '@lifi/sdk';
import { Avatar, ListItemAvatar } from '@mui/material';
import type { Wallet } from '@solana/wallet-adapter-react';
import { useWallet } from '@solana/wallet-adapter-react';
import { ListItemButton } from '../../components/ListItemButton.js';
import { ListItemText } from '../../components/ListItemText.js';
import { useNavigateBack } from '../../hooks/useNavigateBack.js';
import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
import { WidgetEvent } from '../../types/events.js';
import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { ChainType } from '../../utils/chainType.js';
import { ChainId } from '../../types/base.js';

interface SVMListItemButtonProps {
  wallet: Wallet;
}

export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
  const { navigateBack } = useNavigateBack();
  const emitter = useWidgetEvents();
  const { select, disconnect, connected } = useWallet();
  const { setCurrentChain } = useChainSelect('from');
  const { chains } = useWidgetConfig();

  const connect = async () => {
    if (connected) {
      await disconnect();
    }
    select(wallet.adapter.name);
    // We use autoConnect on wallet selection
    // await solanaConnect();

    const selectedChainId = chains?.types?.allow?.includes(ChainType.SVM)
      ? ChainId.SOL
      : chains?.types?.allow?.includes(ChainType.ECLIPSE)
        ? ChainId.ECLIPSE
        : ChainId.SOL;

    const selectedChainType = chains?.types?.allow?.includes(ChainType.SVM)
      ? ChainType.SVM
      : chains?.types?.allow?.includes(ChainType.ECLIPSE)
        ? ChainType.ECLIPSE
        : ChainType.SVM;

    wallet.adapter.once('connect', (publicKey) => {
      emitter.emit(WidgetEvent.WalletConnected, {
        address: publicKey?.toString(),
        chainId: selectedChainId,
        chainType: selectedChainType,
      });
    });
    setCurrentChain(selectedChainId);
    navigateBack();
  };

  return (
    <ListItemButton key={wallet.adapter.name} onClick={connect}>
      <ListItemAvatar>
        <Avatar src={wallet.adapter.icon} alt={wallet.adapter.name}>
          {wallet.adapter.name[0]}
        </Avatar>
      </ListItemAvatar>
      <ListItemText primary={`${wallet.adapter.name}`} />
    </ListItemButton>
  );
};