<script setup lang="ts">
import { ref } from "vue";
import CustomButton from "../CustomButton/CustomButton.vue";
import { debounce } from "@/utils/debounce";
import { decimalCount } from "@/utils/decimalCount";
import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
import { connectProvider } from "@/blockchain/provider";
import { TokenEnum } from "@/model/NetworkEnum";
import { getTokenImage } from "@/utils/imagesPath";
import { onClickOutside } from "@vueuse/core";
import { useOnboard } from "@web3-onboard/vue";

import ChevronDown from "@/assets/chevron.svg";

// html references
const tokenDropdownRef = ref<any>(null);

// Reactive state
const etherStore = useEtherStore();
const { walletAddress, selectedToken } = storeToRefs(etherStore);

const offer = ref<string>("");
const pixKey = ref<string>("");
const selectTokenToggle = ref<boolean>(false);

const enableSelectButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true);
const validPixFormat = ref<boolean>(true);

// Emits
const emit = defineEmits(["approveTokens"]);

// Blockchain methods
const connectAccount = async (): Promise<void> => {
  const { connectWallet } = useOnboard();
  await connectWallet();
};

// Debounce methods
const handleInputEvent = (event: any): void => {
  const { value } = event.target;

  offer.value = value;

  if (decimalCount(offer.value) > 2) {
    validDecimals.value = false;
    enableSelectButton.value = false;
    return;
  }
  validDecimals.value = true;
};

const handlePixKeyInputEvent = (event: any): void => {
  const { value } = event.target;

  pixKey.value = value;

  if (pixFormatValidation(pixKey.value)) {
    validPixFormat.value = true;
    enableSelectButton.value = true;
    return;
  }

  enableSelectButton.value = false;
  validPixFormat.value = false;
};

const openTokenSelection = (): void => {
  selectTokenToggle.value = true;
};

onClickOutside(tokenDropdownRef, () => {
  selectTokenToggle.value = false;
});

const handleSelectedToken = (token: TokenEnum): void => {
  etherStore.setSelectedToken(token);
  selectTokenToggle.value = false;
};

const handleSellClick = async (
  offer: string,
  pixKey: string
): Promise<void> => {
  const postProcessedPixKey = postProcessKey(pixKey);
  emit("approveTokens", { offer, postProcessedPixKey });
};
</script>

<template>
  <div class="page w-full">
    <div class="text-container">
      <span
        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
        >Venda cripto e receba em Pix</span
      >
      <span
        class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
        >Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
        envio da transação e confirme sua oferta.</span
      >
    </div>
    <div class="main-container">
      <div class="backdrop-blur -z-10 w-full h-full"></div>
      <div
        class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
      >
        <div class="flex justify-between items-center">
          <input
            type="number"
            v-model="offer"
            class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
            :class="{
              '!font-medium': offer !== undefined && offer !== '',
              'text-xl': offer !== undefined && offer !== '',
            }"
            @input="debounce(handleInputEvent, 500)($event)"
            placeholder="Digite sua oferta"
            step=".01"
          />
          <div class="relative overflow-visible">
            <button
              ref="tokenDropdownRef"
              class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
              @click="openTokenSelection()"
            >
              <img
                alt="Token image"
                class="sm:w-fit w-4"
                :src="getTokenImage(selectedToken)"
              />
              <span
                class="text-gray-900 sm:text-lg text-md font-medium"
                id="token"
              >
                {{ selectedToken }}
              </span>
              <ChevronDown
                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
                :class="{ 'scale-y-[-1]': selectTokenToggle }"
                alt="Chevron Down"
              />
            </button>
            <transition name="dropdown">
              <div
                v-if="selectTokenToggle"
                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
              >
                <div
                  class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
                >
                  <div
                    v-for="token in TokenEnum"
                    :key="token"
                    class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
                    @click="handleSelectedToken(token)"
                  >
                    <img
                      :alt="token + ' logo'"
                      width="20"
                      height="20"
                      :src="getTokenImage(token)"
                    />
                    <span
                      class="text-gray-900 py-4 text-end font-semibold text-sm"
                    >
                      {{ token }}
                    </span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>

        <div class="flex pt-2 justify-center" v-if="!validDecimals">
          <span class="text-red-500 font-normal text-sm"
            >Por favor utilize no máximo 2 casas decimais</span
          >
        </div>
        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
          <span class="text-red-500 font-normal text-sm"
            >Atualmente não há liquidez nas redes para sua demanda</span
          >
        </div>
      </div>
      <div
        class="flex flex-col w-full bg-white sm:px-10 px-6 py-8 rounded-lg border-y-10"
      >
        <div class="flex justify-between w-full items-center">
          <input
            @input="debounce(handlePixKeyInputEvent, 500)($event)"
            type="text"
            v-model="pixKey"
            class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
            :class="{
              '!font-medium': pixKey !== undefined && pixKey !== '',
              'text-xl': pixKey !== undefined && pixKey !== '',
            }"
            placeholder="Digite a chave Pix"
          />
        </div>
        <div class="flex pt-2 justify-center" v-if="!validPixFormat">
          <span class="text-red-500 font-normal text-sm"
            >Por favor utilize telefone, CPF ou CNPJ</span
          >
        </div>
      </div>
      <CustomButton
        v-if="walletAddress"
        :text="'Aprovar tokens'"
        :isDisabled="!validDecimals || !validPixFormat"
        @buttonClicked="handleSellClick(offer, pixKey)"
      />
      <CustomButton
        v-if="!walletAddress"
        :text="'Conectar carteira'"
        @buttonClicked="connectAccount()"
      />
    </div>
  </div>
</template>

<style scoped>
.custom-divide {
  width: 100%;
  border-bottom: 1px solid #d1d5db;
}
.bottom-position {
  top: -20px;
  right: 50%;
  transform: translateX(50%);
}

.page {
  @apply flex flex-col items-center justify-center w-full mt-16;
}

.text-container {
  @apply flex flex-col items-center justify-center gap-4;
}

.text {
  @apply text-white text-center;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input {
  @apply sm:text-lg text-sm;
}
</style>
