<script setup lang="ts">
/**
 * DialogConfirm - Simple confirmation dialog
 */
import type { DialogWidth, DialogPosition } from './dialogTypes'
import { useI18n } from '@bagelink/vue'
import { computed } from 'vue'
import Btn from '../components/Btn.vue'
import Dialog from './Dialog.vue'

const props = withDefaults(defineProps<{
	open: boolean
	title?: string
	message: string
	width?: DialogWidth
	position?: DialogPosition
	dismissable?: boolean
	confirmText?: string
	cancelText?: string
	confirmColor?: 'primary' | 'red' | 'green' | 'blue'
}>(), {
	width: 's',
	position: 'center',
	dismissable: true,
	confirmColor: 'primary'
})

const emit = defineEmits<{
	'update:open': [value: boolean]
	'resolve': [confirmed: boolean]
}>()

const { $t } = useI18n()

const resolvedTitle = computed(() => props.title || $t('modalConfirm.title'))
const resolvedConfirmText = computed(() => props.confirmText || $t('modalConfirm.confirm'))
const resolvedCancelText = computed(() => props.cancelText || $t('modalConfirm.cancel'))

function handleConfirm() {
	emit('resolve', true)
	emit('update:open', false)
}

function handleCancel() {
	emit('resolve', false)
	emit('update:open', false)
}

function handleClose() {
	emit('resolve', false)
}
</script>

<template>
	<Dialog
		:open="open" :title="resolvedTitle" :width="width" :position="position" :dismissable="dismissable"
		@update:open="$emit('update:open', $event)" @close="handleClose"
	>
		<p>
			{{ message }}
		</p>

		<template #footer>
			<Btn flat @click="handleCancel">
				{{ resolvedCancelText }}
			</Btn>
			<Btn :color="confirmColor" @click="handleConfirm">
				{{ resolvedConfirmText }}
			</Btn>
		</template>
	</Dialog>
</template>

<style scoped>
</style>
