<script setup lang="ts">
import type { UserInfo } from '~/api/modules/user/types'
import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'

const props = withDefaults(defineProps<Props>(), {
  deleteFromDom: false,
})

const emit = defineEmits<{
  (e: 'next'): void
}>()

const { t } = useI18n()

interface Props {
  deleteFromDom?: boolean
}
const isOpen = defineModel<boolean>({ default: false })
const userInfo = useState<UserInfo>('user-info', () => ({}))
function confirm() {
  emit('next')
}
function cancel() {
  isOpen.value = false
}

if (props.deleteFromDom) {
  handleElementPosition('insufficient-funds')
}
</script>

<template>
  <a-modal
    v-model="isOpen"
    name="insufficient-funds"
    :prevent-close="true"
  >
    <div class="flex flex-col gap-5">
      <p class="heading-02 text-center">
        {{ t('modals.low_balance.title') }}
      </p>
      <a-ill-empty-wallet class="self-center" />
      <div class="m-[0_-32px] flex flex-col bg-green-500 py-1.5">
        <p class="body-600 text-center  text-white ">
          {{ t('modals.low_balance.current_balance') }}
        </p>
        <p class="body-600 text-center text-xl text-white ">
          {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
        </p>
      </div>
      <p class="text-center">
        {{ t('modals.low_balance.questions') }}
      </p>
    </div>
    <template #footer>
      <div class="flex gap-2 ">
        <a-button
          view="outline"
          block
          @click="cancel"
        >
          {{ t('modals.buttons.close') }}
        </a-button>
        <a-button block @click="confirm">
          {{ t('modals.buttons.topUp') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped>

</style>
