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

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

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

  },
)
const emit = defineEmits<{
  (e: 'nextBank', num: number): void
}>()
const { t } = useI18n()
const isOpen = defineModel<boolean>({ default: false })
const checkbox = ref('kaspi')
const cards = [
  {
    id: 'kaspi',
    name: 'modals.payment_method.banks.kaspi',
    sum: 10000,
    img: AIconPaymentKaspi,
  },
  {
    id: 'other',
    name: 'modals.payment_method.banks.other',
    sum: 10000,
    img: AIconPaymentCard,
  },
]
function confirm() {
  emit('nextBank', checkbox.value, props.sum)
}
function cancel() {
  isOpen.value = false
}
if (props.deleteFromDom) {
  handleElementPosition('payment-method')
}
</script>

<template>
  <a-modal
    v-model="isOpen"
    name="payment-method"
    :prevent-close="true"
  >
    <div class="flex flex-col gap-5">
      <p class="heading-02 text-center">
        {{ t('modals.payment_method.title') }}
      </p>
      <a-ill-phone-check class="w-full" />
      <p class="body-400 whitespace-pre-wrap text-center">
        {{ t('modals.payment_method.questions') }}
      </p>
      <a-radio-button
        v-for="(item) in cards"
        :key="item.id"
        v-model="checkbox"
        :name="`${item.name}`"
        side="right"
        :value="item.id"
        class="flex items-center justify-between	gap-2 bg-gray-50 p-[10px_16px] rounded-md dark:bg-[#393D40]"
      >
        <div class="flex w-full items-center gap-2">
          <component :is="item.img" />
          <div class="flex w-full items-center justify-between">
            {{ t(item.name) }}
            <p class="body-600">
              {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
            </p>
          </div>
        </div>
      </a-radio-button>
    </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>
