<script setup lang="ts">
import { useReplenishModal } from '#adata-ui/composables/modalsState'

const { t } = useI18n()

const props = withDefaults(
  defineProps<{
    isChangeOpened?: boolean
  }>(),
  {
    isChangeOpened: false
  }
)
const isOpen = useReplenishModal()
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'next', sum: number): void
}>()
const money = ref(0)
const errorAlert = ref(false)

const handlePayment = () => {
  if (money.value <= 1000000) {
    emit('next', money.value)
    errorAlert.value = false
  } else {
    errorAlert.value = true
  }
}
const filterMoney = computed(() => {
  return money.value >= 1
})

const sumArr = ref([
  {
    id: 1,
    value: 1000,
    label: '1 000 ₸'
  },
  {
    id: 2,
    value: 5000,
    label: '5 000 ₸'
  },
  {
    id: 3,
    value: 10000,
    label: '10 000 ₸'
  },
  {
    id: 4,
    value: 20000,
    label: '20 000 ₸'
  }
])
const onClick = (value: number) => {
  money.value = value
}

watch(
  () => props.isChangeOpened,
  (open: boolean) => {
    if (!open) {
      money.value = 0
      errorAlert.value = false
    }
  }
)
</script>

<template>
  <a-modal
    v-model="isOpen"
    :title="t('modals.replenish_modal.title')"
  >
    <div class="flex flex-col items-center justify-center gap-5">
      <a-ill-bill class="max-h-[120px] max-w-[120px]" />
      <p class="body-400 font-semibold">
        {{ t('modals.replenish_modal.info') }}
      </p>
      <a-input-standard
        v-model="money"
        :label="`${t('modals.replenish_modal.enter_sum')}`"
        type="number"
        pattern="[0-9]*"
        clearable
      />
      <a-alert
        v-if="errorAlert"
        color="red"
      >
        {{ t('modals.replenish_modal.error') }}
      </a-alert>
      <div class="flex w-full items-center justify-between">
        <a-chips
          v-for="item in sumArr"
          :key="item.id"
          view="standard"
          size="lg"
          :class="[
            money === item.value
              ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
              : ''
          ]"
          @click.stop="onClick(item.value)"
        >
          <span>{{ item.label }}</span>
        </a-chips>
      </div>
    </div>
    <template #footer>
      <div class="flex w-full gap-2">
        <a-button
          view="outline"
          class="w-full"
          @click="$emit('close')"
        >
          {{ t('modals.buttons.back') }}
        </a-button>
        <a-button
          class="w-full"
          :disabled="!filterMoney"
          @click="handlePayment"
        >
          {{ t('modals.buttons.topUp') }}
        </a-button>
      </div>
    </template>
  </a-modal>
</template>

<style scoped></style>
