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

<script setup lang="ts">
import {useDeposit} from '@composables/user';

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

const { paymentMin, paymentMax } = usePaymentLimits();

const amount = ref<number>(5);

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 {
  display: flex;
  flex-direction: column;
  gap: 20px;

  &__box {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    & span {
      flex-shrink: 0;
      align-self: center;
    }
  }

  &__button {
    width: fit-content;
    padding-inline: 20px;
  }
}
</style>