import React, { useState } from 'react'
import { supportedNetwork, supportedNetworkName } from '../configs'
import { InjectedConnector } from '@web3-react/injected-connector'
import { useWeb3React } from '@web3-react/core'
import { ethers } from 'ethers'
import getErrorMessage from './error'

const getLibrary = provider => {
  const library = new ethers.providers.Web3Provider(provider)
  return library
}

const MetaMask = new InjectedConnector({
  supportedChainIds: [supportedNetwork]
})

const Activation = () => {
  const { activate, active, account } = useWeb3React()
  const [error, setError] = useState(null)

  const connectMetaMask = async () => {
    try {
      await activate(MetaMask, undefined, true)
    } catch (err) {
      setError(err)
    }
  }

  if (!active && !error) {
    return (
      <>
        <p>
          Supported Network: <strong>{supportedNetworkName}</strong>{' '}
        </p>
        <p>
          Please connect to MetaMask, we are about to read/write some
          information on the contract.
        </p>
        <button className='button is-primary' onClick={connectMetaMask}>
          Connect MetaMask
        </button>
      </>
    )
  } else if (error) {
    //error
    return <p className='has-text-danger'>{getErrorMessage(error)}</p>
  } else {
    // success
    return (
      <>
        <h1>Loading sucess</h1>
        <p>{account}</p>
      </>
    )
  }
}

export { Activation, MetaMask, getLibrary }