import { useRef, useState, useEffect } from 'react'
import { useMoralis } from "react-moralis";
import Auxi from '../../hoc/Auxi/Auxi'
import Navigation from './Navigation/Navigation'

import Jazzicon from '@metamask/jazzicon'
import { Button } from '@chakra-ui/button'
import { toast } from 'react-toastify'
import classes from './Header.module.css'


import Logo from '../UI/Logo/Logo'

const Header = (props) => {
    const { Moralis, authenticate, isAuthenticated, isAuthenticating, user, logout } = useMoralis();
    // const [ethAddress, setEthAddress] = useState('')
    // const identicon = useRef(null)

    // useEffect(() => {

    //     if(isAuthenticated) {
    //         setEthAddress(user.get('ethAddress'))
    //     }

    //     if (ethAddress && identicon.current) {
    //       identicon.current.innerHTML = ''
    //       identicon.current.appendChild(Jazzicon(18, parseInt(ethAddress.slice(2, 10), 16)))
    //     }
    //   }, [ethAddress, isAuthenticated])

    let metamaskLogin;

    if (!isAuthenticated) {
        metamaskLogin = <Button isLoading={isAuthenticating} className={classes.walletbtn}
                                onClick={() => authenticate()}>Login with Metamask</Button>
    }
    else
    {
        metamaskLogin = <div> <Button className={classes.walletbtn} onClick={() => logout()}>Logout</Button>
                              <span> {user.get('ethAddress')} </span>
                              {/* <div style={{ height: '1.1em' }} ref={identicon}></div> */}
                              </div>
    }

    // Moralis.Web3.onAccountsChanged(function(accounts) {
    //     logout()
    //    });

    return (
        <Auxi>
            <div className={classes.Header}>
                <div className={classes.HeaderLeft}>
                    <Logo/>
                    {metamaskLogin}
                </div>
                <Navigation />
            </div>
        </Auxi>
    )
}


export default Header;