<script setup>
import {
    NModal, NList, NListItem, NThing, NAvatar, NIcon,
    NText, NDivider, NFlex, NButton, NScrollbar, NEmpty, NSpin
} from 'naive-ui'
import {useReportStore} from "../../../Stores/report.js";
import { TbAlertCircle, TbPencil, TbTrashX } from 'vue-icons-plus/tb'
import {computed, ref, watch} from "vue";

const props = defineProps({
    departmentId: {
        required: true
    },
})

const open = defineModel('open')
const loading = ref(true)

const unwantedEvents = ref([])

const startAt = computed(() => {
    const urlParams = new URLSearchParams(window.location.search)
    return urlParams.get('startAt')
})

const endAt = computed(() => {
    const urlParams = new URLSearchParams(window.location.search)
    return urlParams.get('endAt')
})

const fetchUnwantedEvents = (startAt, endAt) => {
    loading.value = true
    axios.get('/api/statistics/reports/unwanted-events', {
        params: {
            departmentId: props.departmentId,
            startAt,
            endAt
        }
    })
        .then(res => {
            unwantedEvents.value = res.data
        })
        .finally(() => {
            loading.value = false
        })
}

watch([open, () => props.departmentId], ([open, departmentId]) => {
    if (open && departmentId) {
        fetchUnwantedEvents(startAt.value, endAt.value)
    }
}, {
    immediate: true,
    deep: true
})
</script>

<template>
    <NModal v-model:show="open"
            title="Нежелательные события"
            preset="card"
            :mask-closable="false"
            :close-on-esc="false"
            class="max-w-4xl overflow-clip h-[calc(100vh-220px)]"
    >
        <template v-if="loading">
            <div class="flex items-center justify-center h-full">
                <NSpin />
            </div>
        </template>
        <template v-else-if="unwantedEvents.length">
            <NScrollbar class="max-h-[calc(100vh-282px)] pr-3">
                <NList>
                    <NListItem v-for="event in unwantedEvents">
                        <NThing>
                            <template #avatar>
                                <NAvatar>
                                    <NIcon>
                                        <TbAlertCircle class="text-red-400" />
                                    </NIcon>
                                </NAvatar>
                            </template>
                            <template #header>
                                {{ event.title }}
                            </template>
                            <template #description>
                                <NText depth="3">
                                    {{ event.created_at }}
                                </NText>
                            </template>
                            <NText>
                                {{ event.comment }}
                            </NText>
                        </NThing>
                    </NListItem>
                </NList>
            </NScrollbar>
        </template>
        <template v-else>
            <div class="h-full flex items-center justify-center">
                <NEmpty description="Нежелательные события не найдены!" />
            </div>
        </template>

<!--        <template #action>-->
<!--            <NFlex id="modal-action" align="center" justify="space-between">-->
<!--                <NButton type="primary" secondary @click="onCreateEvent()">-->
<!--                    <template #icon>-->
<!--                        <TbCirclePlus />-->
<!--                    </template>-->
<!--                    Создать событие-->
<!--                </NButton>-->
<!--            </NFlex>-->
<!--        </template>-->
    </NModal>
</template>

<style scoped>

</style>
