<template>
  <form @submit.prevent="handleDeposit()" class="form">
    <div class="form__box">
      <ui-input
          :type="'text'"
          :placeholder="''"
          v-model="amount"
          :numberOnly="true"
      />
      <ui-input
          :type="'text'"
          :placeholder="''"
          v-model="amount"
          :numberOnly="true"
      />
    </div>
    <ui-button
        class="form__button"
        :isDisabled="!isFormValid"
        :isLoading="loading"
    >
      {{ t('buttons.topUp') }}
    </ui-button>
  </form>
</template>

<script setup>
import UiInput from "@/components/ui/ui-input.vue";
import {computed, ref} from "vue";
import UiButton from "@/components/ui/ui-button.vue";
import {useI18n} from "vue-i18n";
import {useDeposit} from "@/composables/user/useDeposit.js";
import {useCompanyStore} from "@/stores/company.js";

const {t} = useI18n()
const companyStore = useCompanyStore()

const paymentMin = computed(() => companyStore.companyInfo?.paymentGatewayMinimum)
const paymentMax = computed(() => companyStore.companyInfo?.paymentGatewayMaximum)

const amount = ref('')

const isFormValid = computed(() => {
  return (
    amount.value >= paymentMin.value &&
    amount.value <= paymentMax.value
  )
})

const { deposit, loading } = useDeposit();

async function handleDeposit() {
  await deposit(amount.value);
}
</script>

<style lang="scss" scoped>
.form {
  &__box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
}
</style>