<script setup lang="ts">
import SearchComponent from "../components/SearchComponent.vue";
import ValidationComponent from "../components/LoadingComponent.vue";
import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
import blockchain from "../utils/blockchain";
import { ref, onMounted } from "vue";

import { useEtherStore } from "@/store/ether";
import QrCodeComponent from "../components/QrCodeComponent.vue";
import { storeToRefs } from "pinia";
import { addLock, releaseLock } from "@/blockchain/buyerMethods";
import { updateWalletStatus } from "@/blockchain/wallet";
import { getNetworksLiquidity } from "@/blockchain/events";
enum Step {
  Search,
  Buy,
  List,
}

const etherStore = useEtherStore();
etherStore.setSellerView(false);

// States
const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
const flowStep = ref<Step>(Step.Search);
const pixTarget = ref<string>("");
const tokenAmount = ref<number>();
const lockTransactionHash = ref<string>("");
const lockId = ref<string>("");
const loadingRelease = ref<Boolean>(false);
const lastWalletReleaseTransactions = ref<any[]>([]);

const confirmBuyClick = async (selectedDeposit: any, tokenValue: number) => {
  // finish buy screen
  pixTarget.value = selectedDeposit.pixKey;
  tokenAmount.value = tokenValue;

  // Makes lock with deposit ID and the Amount
  if (selectedDeposit) {
    flowStep.value = Step.Buy;
    etherStore.setLoadingLock(true);

    await addLock(selectedDeposit.depositID, tokenValue)
      .then((lock) => {
        lockTransactionHash.value = lock.transactionHash;
      })
      .catch((err) => {
        console.log(err)
        flowStep.value = Step.Search;
      });

    etherStore.setLoadingLock(false);
  }
};

const releaseTransaction = async ({ e2eId }: any) => {
  flowStep.value = Step.List;
  loadingRelease.value = true;

  const findLock = locksAddedList.value.find((element) => {
    if (element.transactionHash === lockTransactionHash.value) {
      lockId.value = element.args.lockID;
      return true;
    }
    return false;
  });

  if (findLock && tokenAmount.value) {
    const release = await releaseLock(
      pixTarget.value,
      tokenAmount.value,
      e2eId,
      lockId.value
    );
    release.wait();

    await blockchain
      .listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
      .then((releaseTransactions) => {
        if (releaseTransactions)
          lastWalletReleaseTransactions.value = releaseTransactions;
      });

    await updateWalletStatus();
    loadingRelease.value = false;
  }
};


onMounted(async () => {
  await getNetworksLiquidity();
})
</script>

<template>
  <SearchComponent
    v-if="flowStep == Step.Search"
    @token-buy="confirmBuyClick"
  />
  <div v-if="flowStep == Step.Buy">
    <QrCodeComponent
      :pixTarget="pixTarget"
      :tokenValue="tokenAmount"
      @pix-validated="releaseTransaction"
      v-if="!loadingLock"
    />
    <ValidationComponent
      v-if="loadingLock"
      :message="'A transação está sendo enviada para a rede'"
    />
  </div>
  <div v-if="flowStep == Step.List">
    <BuyConfirmedComponent
      v-if="!loadingRelease"
      :last-wallet-release-transactions="lastWalletReleaseTransactions"
      :tokenAmount="tokenAmount"
      @make-another-transaction="flowStep = Step.Search"
    />
    <ValidationComponent
      v-if="loadingRelease"
      :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
    />
  </div>
</template>

<style scoped></style>
