<script setup lang="ts">
import { NButton, NFlex, NModal, NSpace, NSpin, NText } from 'naive-ui';
import type { AppDialogButtonProps } from '../composables/useAppDialog';

withDefaults(
    defineProps<{
        show: boolean;
        loading?: boolean;
        title?: string;
        content?: string;
        positiveText?: string;
        negativeText?: string;
        maskClosable?: boolean;
        positiveProps?: AppDialogButtonProps;
        negativeProps?: AppDialogButtonProps;
    }>(),
    {
        loading: false,
        positiveText: 'Подтвердить',
        negativeText: 'Отмена',
        maskClosable: false,
        positiveProps: () => ({ type: 'error', secondary: true }),
        negativeProps: () => ({ type: 'primary', secondary: true }),
    },
);

const emit = defineEmits<{
    'update:show': [value: boolean];
    confirm: [];
    cancel: [];
    'after-leave': [];
}>();
</script>

<template>
    <NModal
        :show="show"
        :mask-closable="maskClosable"
        preset="card"
        class="relative max-w-sm overflow-clip"
        :title="title"
        @update:show="(val) => emit('update:show', val)"
        @after-leave="emit('after-leave')"
    >
        <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="emit('cancel')"
                >
                    {{ negativeText }}
                </NButton>
                <NButton
                    v-if="positiveText"
                    block
                    v-bind="positiveProps"
                    @click="emit('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 h-full flex-col items-center justify-center">
                <NSpin description="Загрузка" />
            </div>
        </div>
    </NModal>
</template>
