import { Avatar, ListItemAvatar } from '@mui/material';
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 type { MVMWallet } from '../../types/wallet.js';
import { WidgetEvent } from '../../types/events.js';
import { ChainId } from '../../types/base.js';
import { ChainType } from '../../utils/chainType.js';
import { useEffect } from 'react';
import { useMove } from '../../providers/WalletProvider/MVM/MVMBaseProvider.js';
import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js';

// @ts-ignore
import { useWallet } from '@suiet/wallet-kit';

interface MVMListItemButtonProps {
  walletProps: MVMWallet;
}

export const MVMListItemButton = ({ walletProps }: MVMListItemButtonProps) => {
  const { navigateBack } = useNavigateBack();
  const emitter = useWidgetEvents();
  const { moveWalletInstance, isConnected } = useMove();
  const wallet = useWallet();
  const { setCurrentChain } = useChainSelect('from');

  const handleNavigateBack = () => {
    if (wallet?.connected) {
      emitter.emit(WidgetEvent.WalletConnected, {
        address: wallet?.address,
        chainId: ChainId.MOVE,
        chainType: ChainType.MVM,
      });
      setCurrentChain(ChainId.MOVE);
      return;
    }
  };

  useEffect(() => {
    handleNavigateBack();
    // eslint-disable-next-line  react-hooks/exhaustive-deps
  }, [wallet]);

  useEffect(() => {
    if (isConnected) {
      navigateBack();
    }
    // eslint-disable-next-line  react-hooks/exhaustive-deps
  }, [isConnected]);

  const connect = async () => {
    handleNavigateBack();

    moveWalletInstance?.toggleSelect();
  };

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