import type {
  FC,
  MouseEventHandler,
} from 'react';
import React from 'react';

import { WalletReadyState } from '@solana/wallet-adapter-base';
import type { Wallet } from '@solana/wallet-adapter-react';

import { useWalletModal } from '../hooks';
import { Button } from './Button';
import { WalletIcon } from './WalletIcon';

export interface WalletListItemProps {
  handleClick: MouseEventHandler<HTMLButtonElement>;
  tabIndex?: number;
  wallet: Wallet;
}

export const WalletListItem: FC<WalletListItemProps> = ({ handleClick, tabIndex, wallet }) => {
  const { trans } = useWalletModal()
  const detectingStatus = React.useMemo(() => {
    switch(wallet.readyState) {
      case WalletReadyState.Installed:
        return (<span className="wallets-list-item-status">{trans.detected}</span>)
      case WalletReadyState.NotDetected:
        return (<span className="wallets-list-item-status">{trans.not_detected}</span>)
      default:
        return <></>
    }
  }, [wallet, trans])

  return (
    <Button
      className="wallets-list-item"
      onClick={handleClick}
      beginIcon={<WalletIcon wallet={wallet} />}
      tabIndex={tabIndex}
    >
      Carax Wallet
      {detectingStatus}
    </Button>
  )
}
