import "./App.css";
import { fromJSProcessor, JSProcessor } from "ethereum-indexer-js-processor";
import {
  createIndexerState,
  keepStateOnIndexedDB,
} from "ethereum-indexer-browser";
import { connect } from "./utils/web3";
import react from "react";

// we need the contract info
// the abi will be used by the processor to have its type generated, allowing you to get type-safety
// the adress will be given to the indexer, so it index only this contract
// the startBlock field allow to tell the indexer to start indexing from that point only
// here it is the block at which the contract was deployed
const contract = {
  abi: [
    {
      anonymous: false,
      inputs: [
        {
          indexed: true,
          name: "user",
          type: "address",
        },
        {
          indexed: false,
          name: "message",
          type: "string",
        },
      ],
      name: "MessageChanged",
      type: "event",
    },
  ],
  address: "0x21d366ee3BbF67AB057c517380D37E54fFd9dfC0",
  startBlock: 3040661,
} as const;

// we define the type of the state computed by the processor
// we can also declare it inline in the generic type of JSProcessor
type State = { greetings: { account: `0x${string}`; message: string }[] };

// the processor is given the type of the ABI as Generic type to get generated
// it also specify the type which represent the current state
const processor: JSProcessor<typeof contract.abi, State> = {
  // you can set a version, ideally you would generate it so that it changes for each change
  // when a version changes, the indexer will detect that and clear the state
  // if it has the event stream cached, it will repopulate the state automatically
  version: "1.0.1",
  // this function set the starting state
  // this allow the app to always have access to a state, no undefined needed
  construct() {
    return { greetings: [] };
  },
  // each event has an associated on<EventName> function which is given both the current state and the typed event
  // each event's argument can be accessed via the `args` field
  // it then modify the state as it wishes
  // behind the scene, the JSProcessor will handle reorg by reverting and applying new events automatically
  onMessageChanged(state, event) {
    const greetingFound = state.greetings.find(
      (v) => v.account === event.args.user
    );
    if (greetingFound) {
      greetingFound.message = event.args.message;
    } else {
      state.greetings.push({
        message: event.args.message,
        account: event.args.user,
      });
    }
  },
};

// we setup the indexer via a call to `createIndexerState`
// this setup a set of observable (subscribe pattern)
// including one for the current state (computed by the processor above)
// and one for the syncing
// we then call `.withHooks(react)` to transform these observable in react hooks ready to be used.
const { init, useState, useSyncing, startAutoIndexing } = createIndexerState(
  fromJSProcessor(processor)(),
  {
    keepState: keepStateOnIndexedDB("basic") as any,
  }
).withHooks(react);

// we now need to get a handle on a ethereum provider
// for this app we are simply using window.ethereum
const ethereum = (window as any).ethereum;

// but to not trigger a metamask popup right away we wrap that in a function to be called via a click of a button
function start() {
  if (ethereum) {
    // here we first connect it to the chain of our choice and then initialise the indexer
    // see ./utils/web3
    connect(ethereum, {
      chain: {
        chainId: "11155111",
        chainName: "Sepolia",
        rpcUrls: ["https://rpc.sepolia.org"],
        nativeCurrency: { name: "Sepolia Ether", symbol: "SEP", decimals: 18 },
        blockExplorerUrls: ["https://sepolia.etherscan.io"],
      },
    }).then(({ ethereum }) => {
      // we already setup the processor
      // now we need to initialise the indexer with
      // - an EIP-1193 provider (window.ethereum here)
      // - source config which includes the chainId and the list of contracts (abi,address. startBlock)
      init({
        provider: ethereum,
        source: { chainId: "11155111", contracts: [contract] },
      }).then(() => {
        // this automatically index on a timer
        // alternatively you can call `indexMore` or `indexMoreAndCatchupIfNeeded`, both available from the return value of `createIndexerState`
        // startAutoIndexing is easier but manually calling `indexMore` or `indexMoreAndCatchupIfNeeded` is better
        // this is because you can call them for every `newHeads` eth_subscribe message
        startAutoIndexing();
      });
    });
  }
}

function App() {
  // we use the hooks to get the latest state and make sure react update the values as they changes
  const $state = useState();
  const $syncing = useSyncing();

  if (!ethereum) {
    return (
      <div className="App">
        <h1>Indexing a basic example</h1>
        <p>To test this app, you need to have a ethereum wallet installed</p>
      </div>
    );
  }
  // we have various variable to check the status of the indexer
  // here we can act on whether the indexer is still waiting to be provided an EIP-1193 provider
  if ($syncing.waitingForProvider) {
    return (
      <div className="App">
        <h1>Indexing a basic example</h1>
        <button
          onClick={start}
          style={{ backgroundColor: "#45ffbb", color: "black" }}
        >
          Start
        </button>
      </div>
    );
  }

  // here we add a progress bar indicating the progress of the indexer
  return (
    <div className="App">
      <h1>Indexing a basic example</h1>
      <p>{$syncing.lastSync?.syncPercentage || 0}</p>
      {$syncing.lastSync ? (
        <progress
          value={($syncing.lastSync.syncPercentage || 0) / 100}
          style={{ width: "100%" }}
        />
      ) : (
        <p>Please wait...</p>
      )}
      <div>
        {$state.greetings.map((greeting) => (
          <p key={greeting.account}>{greeting.message}</p>
        ))}
      </div>
    </div>
  );
}

export default App;