import { useState, useEffect} from 'react'
import "../css/Banner.css"
import {NavLink} from 'react-router-dom';
import eth from "../eth/eth.js"

function Banner() {
  const [count, setCount] = useState(0)
  const [address, setAddress] = useState("")

  //functions
  useEffect(() => {
      if(window.ethereum.selectedAddress){
        setAddress(window.ethereum.selectedAddress);
      }
  },[])

  function addCount() {
    var newValue = count + 1;
    setCount(newValue);
  }

  async function connect(){
    await eth.init();
    setAddress(window.ethereum.selectedAddress);
  }

  return (
    <div className="Banner">
      <div className="BannerContainer">
        <div>Logo</div>
        <div className="navigation">
          <NavLink to="/new" className={({ isActive }) => (isActive ? 'activeListItem' : 'listItem')}>
            <div className="nav-el">New</div>
          </NavLink>
          <NavLink to="/beneficiary" className={({ isActive }) => (isActive ? 'activeListItem' : 'listItem')}>
            <div className="nav-el">Beneficiary</div>
          </NavLink>
          <NavLink to="/testator" className={({ isActive }) => (isActive ? 'activeListItem' : 'listItem')}>
            <div className="nav-el">Testator</div>
          </NavLink>
        </div>
        {address ?
          <>
            {address}
          </>
          :
          <>
            <button onClick={connect}>Connect</button>
          </>
        }
      </div>
    </div>
  )
}

export default Banner