// Next js
import Image from "next/image";
import { useEffect } from "react";
// Redux
import { useDispatch } from "react-redux";
import {
    setConnectPopup,
    setProvider,
    setSigner,
    setChainId,
    setAddress,
    resetWeb3,
} from "../../redux/actions/actions";
// React icon
import { AiOutlineClose } from "react-icons/ai";
// Web3
import WalletConnectProvider from "@walletconnect/web3-provider";
import { providers, ethers } from "ethers";

const tailwind = {
    providerContainer:
        "flex flex-col items-center mx-5 hover:bg-zinc-200 px-5 py-10 cursor-pointer duration-200",
};

const ConnectPopup = () => {
    const dispatch = useDispatch();

    // Connection to metamask =============================
    async function connectMetamask() {
        if (window.ethereum) {
            try {
                window.ethereum
                    .request({ method: "eth_requestAccounts" })
                    .then((result) => {
                        updateMetamask(result[0]);
                    });
            } catch (error) {
                console.log(error);
            }
        } else {
            alert("Please install Metamask Wallet: metamask.io");
        }
    }

    async function updateMetamask() {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = provider.getSigner();
        const address = await signer.getAddress();
        const network = await provider.getNetwork();
        // ======
        dispatch(setProvider(provider));
        dispatch(setSigner(signer));
        dispatch(setAddress(address));
        dispatch(setChainId(network.chainId));
        dispatch(setConnectPopup(false));
    }

    // Connection with Wallet Connect and Infura section =============================
    const infuraId = "c324248cc5e14a859dcc4ea1a25b0880";
    const WCprovider = new WalletConnectProvider({
        rpc: {
            137: `https://polygon-mainnet.infura.io/v3/${infuraId}`,
        },
    });

    async function connectWalletConnect() {
        try {
            dispatch(setConnectPopup(false));
            await WCprovider.enable();
            const web3Provider = new providers.Web3Provider(WCprovider);
            const signer = web3Provider.getSigner();
            const address = await signer.getAddress();
            const network = await web3Provider.getNetwork();
            // ===============
            dispatch(setProvider(web3Provider));
            dispatch(setSigner(signer));
            dispatch(setAddress(address));
            dispatch(setChainId(network.chainId));
        } catch (error) {
            console.log(error);
        }
    }

    // Wallet events =====================================
    useEffect(() => {
        window.ethereum.on("chainChanged", (chainId) => {
            if (chainId === "0x89") {
                dispatch(setChainId(137));
            } else {
                dispatch(setChainId(chainId));
            }
        });

        window.ethereum.on("accountsChanged", (accounts) => {
            dispatch(resetWeb3());
            connectMetamask();
        });
    });

    return (
        <div
            className="fixed w-full flex items-center justify-center min-h-screen z-[2000]"
            style={{
                backgroundColor: "rgba(0, 0, 0, 0.9)",
            }}
        >
            <div className="bg-white rounded-xl p-10 flex flex-col lg:flex-row text-black relative mx-5">
                <div
                    className={tailwind.providerContainer}
                    onClick={connectMetamask}
                >
                    <Image
                        src="/img/metamask-fox.svg"
                        alt="logo metamask"
                        height={75}
                        width={75}
                    />
                    <h3 className="text-2xl font-bold mt-3">Metamask</h3>
                    <p className="text-center">
                        Connectez votre wallet Metamask
                    </p>
                </div>
                <div
                    className={tailwind.providerContainer}
                    onClick={connectWalletConnect}
                >
                    <Image
                        src="/img/wallet-connect.png"
                        alt="logo metamask"
                        height={75}
                        width={75}
                    />
                    <h3 className="text-2xl font-bold mt-3">WalletConnect</h3>
                    <p className="text-center">
                        Une centaine de wallets disponibles
                    </p>
                </div>
                <AiOutlineClose
                    className="absolute text-2xl top-5 right-5 cursor-pointer"
                    onClick={() => dispatch(setConnectPopup(false))}
                />
            </div>
        </div>
    );
};

export default ConnectPopup;