//App.js | index.js

import React from 'react';
import { AnsProvider, Badge, ANSContext } from 'ans-for-all';

//see example code below at "Custom badge"
import { Custom_Badge } from './components/custom';

//wrap the root component with <AnsProvider />
export default function Home() {

  return (
    <AnsProvider>
      <div className="mb-2">
        <Name />
      </div>

      <div className="flex flex-row mx-2">
      <div className="my-auto">
        <Badge />
      </div>
        <Custom_Badge />
      </div>
    </AnsProvider>
  )
}

export function Name() {

  /* 
  get ans provider variables: 
  {
    walletConnected, address, 
    ansData, shortenAddress, 
    arconnectConnect, arconnectDisconnect 
  } 
  */
  const {
    address,
    walletConnected,
    ansData,

  } = useAns();

  return (
    walletConnected ?
      <>
        <h1 className="text-3xl font-bold underline" style={{ color: ansData?.address_color }}>
          Welcome {ansData?.currentLabel}
        </h1>
        <br />
        <h1 className="text-xl font-bold" style={{ color: ansData?.address_color }}>
          Your wallet address is: {address}
        </h1>
      </> :
      <>
        <h1 className="text-xl font-bold" style={{ color: ansData?.address_color }}>
          Please Login using an Arweave Wallet
        </h1>
      </>
  )
}

// components/custom.jsx

import * as React from 'react';


import { useAns } from 'ans-for-all';

export const Default_Badge = () => {

    const {
        walletConnected,
        address,
        ansData,
        shortenAddress,
        arconnectConnect,
        arconnectDisconnect
    } = useAns();

    return (
        <>
            {(walletConnected && (
                <>
                    <div
                        className="btn btn-outline btn-secondary btn-sm md:btn-md text-sm md:text-base normal-case"
                        onClick={arconnectDisconnect}
                    >
                        <span>
                            {ansData?.currentLabel ? `${ansData?.currentLabel}.ar` : shortenAddress(address)}
                        </span>
                        {(ansData?.avatar === "") ?
                            <div className="mx-auto rounded-full h-6 w-6 ml-2 btn-secondary border-[1px]" style={{ backgroundColor: ansData?.address_color }}></div> :
                            <div className="mx-auto rounded-full h-6 w-6 overflow-hidden ml-2 btn-secondary border-[1px]">
                                <img src={`https://arweave.net/${ansData?.avatar}`} alt="Profile" width="100%" height="100%" />
                            </div>}

                    </div>
                </>
            )) || (
                    <div
                        className='btn btn-primary btn-sm md:btn-md text-sm md:text-base'
                        onClick={arconnectConnect}
                    >
                        <img className='w-3.5 h-3.5 mr-3.5 md:w-4 md:h-4 md:mr-4' src="https://nanofuxion.ar.page/favicon.png"></img> {"ANS login"}
                    </div>
                )}
        </>
    )
}