<script lang="ts" setup>
import type { ThemeType } from '@bagelink/vue'
import { Btn, Modal, useI18n } from '@bagelink/vue'
import { computed } from 'vue'

const props = defineProps<{
	title?: string
	message?: string
	confirmText?: string
	confirmBtnColor?: ThemeType
	cancelBtnColor?: ThemeType
	cancelText?: string
	resolve: (value: boolean) => void
}>()

const emit = defineEmits(['update:visible'])
const { $t } = useI18n()

function select(val: boolean) {
	props.resolve(val)
	emit('update:visible')
}

const title = computed(() => props.title || $t('modalConfirm.title'))
const message = computed(() => props.message || $t('modalConfirm.message'))
const confirmText = computed(() => props.confirmText || $t('modalConfirm.confirm'))
const cancelText = computed(() => props.cancelText || $t('modalConfirm.cancel'))
const confirmBtnColor = computed((): ThemeType => props.confirmBtnColor || 'green')
const cancelBtnColor = computed((): ThemeType => props.cancelBtnColor || 'gray')
</script>

<template>
	<Modal :title="title" width="380px" :dismissable="false" class="txt-center" :zIndex="9999">
		<p class="pb-05 pretty">
			{{ message }}
		</p>
		<template #footer>
			<Btn :color="cancelBtnColor" :value="cancelText" @click="select(false)" />
			<Btn :color="confirmBtnColor" :value="confirmText" @click="select(true)" />
		</template>
	</Modal>
</template>
