import { Provider, Wallet, ScriptTransactionRequest } from "fuels";
import { useEffect, useState } from "react";

import { TestContract } from "./typegend";
import contractIds from "./typegend/contract-ids.json";

function App() {
  const [request, setRequest] = useState<ScriptTransactionRequest | null>(null);

  // Initialize the provider and wallet
  const NETWORK_URL = "https://mainnet.fuel.network/v1/graphql";
  const provider = new Provider(NETWORK_URL);
  const wallet = Wallet.fromAddress("0x...", provider);

  /**
   * Here we'll prepare our transaction upfront on page load, so that
   * by the time the user interacts with your app (i.e. clicking a btn),
   * the transaction is ready to be submitted
   */
  useEffect(() => {
    const onPageLoad = async () => {
      // 1. Connect to the contract
      const contractInstance = new TestContract(
        contractIds.testContract,
        wallet,
      );

      // 2. Invoke the contract function whilst estimating and funding the
      // call, which gives us the transaction request
      const preparedRequest = await contractInstance.functions
        .increment_counter(1)
        .fundWithRequiredCoins();

      setRequest(preparedRequest);
    };

    onPageLoad();
  }, []);

  /**
   * By the time user user clicks the submit button, we only need to
   * submit the transaction to the network
   */
  const handleSubmit = async () => {
    if (!request) return;

    // 1. Submit the transaction to the network
    const response = await wallet.sendTransaction(request);

    // 2. Wait for the transaction to settle and get the result
    const result = await response.waitForResult();

    console.log("result", result);
  };

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default App;