import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import {
  PhantomWalletAdapter,
  SlopeWalletAdapter,
  CoinbaseWalletAdapter,
  TrustWalletAdapter,
  SolflareWalletAdapter,
  ExodusWalletAdapter,
  LedgerWalletAdapter,
  MathWalletAdapter,
  TokenPocketWalletAdapter,
  TorusWalletAdapter,
  Coin98WalletAdapter,
} from "@solana/wallet-adapter-wallets";
import { clusterApiUrl } from "@solana/web3.js";
import { useMemo, ReactNode, FC, useEffect } from "react";

const WalletContext: FC<{
  children: ReactNode;
  network: WalletAdapterNetwork;
}> = ({ children, network }) => {
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  let walletList =useMemo(()=>(window.innerWidth <= 768 ?  [  
  new PhantomWalletAdapter(),
  new SlopeWalletAdapter(),
  new TorusWalletAdapter(),
  new SolflareWalletAdapter({ network }),
  new CoinbaseWalletAdapter(),
  new ExodusWalletAdapter(),
  new TokenPocketWalletAdapter(),
  new TrustWalletAdapter(),
  new MathWalletAdapter(),
  new Coin98WalletAdapter()
] : [
  new PhantomWalletAdapter(),
  new SlopeWalletAdapter(),
  new TorusWalletAdapter(),
  new SolflareWalletAdapter({ network }),
  new LedgerWalletAdapter(),
  new CoinbaseWalletAdapter(),
  new ExodusWalletAdapter(),
  new TokenPocketWalletAdapter(),
  new MathWalletAdapter(),
  new Coin98WalletAdapter()]),[network]) 
  const wallets = useMemo(
    () => walletList,[walletList]
  );

  useEffect(() => {
    localStorage.removeItem("walletName");
  }, []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets}>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};
export default WalletContext;