<script setup>
import { NModal, NSpace, NButton, NText, NFlex, NSpin } from 'naive-ui'

const props = defineProps({
    show: Boolean,
    loading: Boolean,
    title: String,
    content: String,
    positiveText: { type: String, default: 'Подтвердить' },
    negativeText: { type: String, default: 'Отмена' },
    maskClosable: { type: Boolean, default: false },
    positiveProps: { type: Object, default: { type: 'error', secondary: true } },
    negativeProps: { type: Object, default: { type: 'primary', secondary: true } }
})

const emit = defineEmits(['update:show', 'confirm', 'cancel'])

const handleAction = (type) => {
    emit(type)
}
</script>

<template>
    <NModal
        :show="show"
        :mask-closable="maskClosable"
        @update:show="(val) => emit('update:show', val)"
        @after-leave="emit('after-leave')"
        preset="card"
        class="max-w-sm relative overflow-clip"
        :title="title"
    >
        <NFlex vertical size="large">
            <NSpace vertical :size="0">
                <NText v-if="content" tag="p">{{ content }}</NText>
            </NSpace>

            <NSpace vertical size="small">
                <NButton v-if="negativeText" block v-bind="negativeProps" @click="handleAction('cancel')">
                    {{ negativeText }}
                </NButton>
                <NButton v-if="positiveText" block v-bind="positiveProps" @click="handleAction('confirm')">
                    {{ positiveText }}
                </NButton>
            </NSpace>
        </NFlex>
        <div v-if="loading" class="absolute inset-0" style="background-color: color-mix(in srgb, var(--n-color-embedded-modal), transparent 50%);">
            <div class="flex flex-col items-center justify-center h-full">
                <NSpin description="Загрузка" />
            </div>
        </div>
    </NModal>
</template>
