<script setup lang="ts">
import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'

const props = withDefaults(
  defineProps<{
    requestId: number
    deleteFromDom?: boolean

  }>(),
  {
    requestId: 0,
    deleteFromDom: false,

  },
)
const isOpen = defineModel<boolean>({ default: false })
const localePath = useLocalePath()
const { t } = useI18n()

function goKaspi() {
  window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${props.requestId}`), '_blank')
}

function cancel() {
  isOpen.value = false
}
if (props.deleteFromDom) {
  handleElementPosition('redirects-banks-modal')
}
</script>

<template>
  <a-modal
    v-model="isOpen"
    name="redirects-banks-modal"
    :prevent-close="true"
  >
    <div class="flex flex-col gap-5">
      <p class="heading-02 whitespace-pre-wrap text-center">
        {{ t('modals.payment_method.redirects_bank.title') }}
      </p>
      <a-button block @click="goKaspi">
        {{ t('modals.buttons.goToKaspi') }}
      </a-button>
      <div class="flex flex-col gap-2">
        <p class="body-400 text-center">
          {{ t('modals.payment_method.redirects_bank.paymentId') }}
        </p>
        <p class="text-center text-xl	font-semibold">
          {{ requestId }}
        </p>
      </div>
      <p class="body-400 text-center">
        {{ t('modals.payment_method.redirects_bank.subtitle') }}
      </p>
      <a-button
        view="outline"
        block
        @click="cancel"
      >
        {{ t('modals.buttons.close') }}
      </a-button>
    </div>
  </a-modal>
</template>

<style scoped>

</style>
