<script setup>
import {NButton, NCard, NFlex, NAlert, NCollapse, NCollapseItem, NTabPane, NTabs} from 'naive-ui'
import ReportSectionItem from "./ReportSectionItem.vue";
import {computed, ref, watch} from "vue";
import {useReportStore} from "../../../Stores/report.js";
import {storeToRefs} from "pinia";
import ReportSectionHeader from "./ReportSectionHeader.vue";
import ManualPatientModal from "./ManualPatientModal.vue";
import {useDebounceFn} from "@vueuse/core";

const props = defineProps({
    mode: {
        type: String,
        default: 'fillable' // 'fillable', 'readonly'
    }
})

const reportStore = useReportStore()
const {patientsData} = storeToRefs(reportStore)
const showPlanManualPatientModal = ref(false)
const showEmergencyManualPatientModal = ref(false)
const activeRootTab = ref('mis')
const activeMisOutcomeTab = ref('discharged')
const activeSpecialOutcomeTab = ref('discharged')

const handleItemDragged = (event) => {
    // console.log('Начато перетаскивание:', event)
}

const handleCollapseItemDragEnter = (e, itemName) => {
    // Проверяем, активно ли перетаскивание и наведение происходит на нужную секцию ("3")
    if (reportStore.isDragActive && itemName === '3') {
        // Открываем секцию, если она еще не открыта
        if (!reportStore.openedCollapsible.includes(itemName)) {
            // Добавляем имя в массив открытых, если используется массив
            reportStore.openedCollapsible = [...reportStore.openedCollapsible, itemName];
        }
    }
}

// Обработка события drop
const handleItemDropped = (event) => {
    const { item, fromStatus, toStatus } = event

    // Добавляем в целевую таблицу
    if (toStatus && patientsData.value[toStatus]) {
        // Проверяем, нет ли уже такого элемента
        if (!patientsData.value[toStatus].some(i => i.id === item.id)) {
            patientsData.value[toStatus].push(item)
        }
    }
}

const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
const canEditReport = computed(() => Boolean(reportStore.reportInfo?.report?.isActiveSendButton))
const loadCounts = useDebounceFn(async () => {
    await reportStore.loadAllStatusCounts()
}, 250)

watch(
    () => [reportStore.reportInfo?.dates?.startAt, reportStore.reportInfo?.dates?.endAt, reportStore.reportInfo?.department?.department_id],
    async () => {
        await loadCounts()
    },
    { immediate: true }
)
</script>

<template>
    <NCard>
        <NTabs v-model:value="activeRootTab" type="segment" animated>
            <NTabPane name="mis" tab="МИС">
                <NCollapse v-model:expanded-names="reportStore.openedCollapsible">
                    <NCollapseItem name="1">
                        <template #header>
                            <div class="flex w-full items-center justify-between gap-3 pr-4">
                                <ReportSectionHeader title="Планово" status="mis-plan" />
                            </div>
                        </template>
                        <ReportSectionItem status="mis-plan"
                                           :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('1')"
                                           :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                           is-draggable
                                           @item-dragged="handleItemDragged"
                        />
                    </NCollapseItem>
                    <NCollapseItem name="2">
                        <template #header>
                            <div class="flex w-full items-center justify-between gap-3 pr-4">
                                <ReportSectionHeader title="Экстренно" status="mis-emergency" />
                            </div>
                        </template>
                        <ReportSectionItem status="mis-emergency"
                                           :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('2')"
                                           :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                           is-draggable
                                           @item-dragged="handleItemDragged"
                        />
                    </NCollapseItem>
                    <NCollapseItem name="3" @dragenter="(e) => handleCollapseItemDragEnter(e, '3')">
                        <template #header>
                            <ReportSectionHeader title="Находятся на контроле" status="mis-observation" />
                        </template>
                        <NFlex :size="12">
                            <ReportSectionItem status="mis-observation"
                                               :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('3')"
                                               id="observation-table"
                                               @item-dragged="handleItemDragged"
                                               @item-dropped="handleItemDropped"
                                               is-removable
                                               is-draggable-drop
                            />
                            <NAlert v-if="isFillableMode" type="info" class="w-full">
                                Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение
                            </NAlert>
                        </NFlex>
                    </NCollapseItem>
                    <NCollapseItem name="4">
                        <template #header>
                            <ReportSectionHeader title="Находятся в реанимации" status="mis-reanimation" />
                        </template>
                        <ReportSectionItem status="mis-reanimation"
                                           :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('4')"
                        />
                    </NCollapseItem>
                    <NCollapseItem name="5">
                        <template #header>
                            <ReportSectionHeader title="Выбывшие" status="mis-outcome" />
                        </template>
                        <NTabs v-model:value="activeMisOutcomeTab" type="segment" animated>
                            <NTabPane name="discharged">
                                <template #tab>
                                    <ReportSectionHeader title="Выписанные" status="mis-outcome-discharged" />
                                </template>
                                <ReportSectionItem status="mis-outcome-discharged"
                                                   :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('5') && activeMisOutcomeTab === 'discharged'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                            <NTabPane name="deceased">
                                <template #tab>
                                    <ReportSectionHeader title="Умершие" status="mis-outcome-deceased" />
                                </template>
                                <ReportSectionItem status="mis-outcome-deceased"
                                                   :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('5') && activeMisOutcomeTab === 'deceased'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                            <NTabPane name="transferred">
                                <template #tab>
                                    <ReportSectionHeader title="Переведённые" status="mis-outcome-transferred" />
                                </template>
                                <ReportSectionItem status="mis-outcome-transferred"
                                                   :enabled="activeRootTab === 'mis' && reportStore.openedCollapsible.includes('5') && activeMisOutcomeTab === 'transferred'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                        </NTabs>
                    </NCollapseItem>
                </NCollapse>
            </NTabPane>
            <NTabPane name="special" tab="Спец. контингент">
                <NCollapse v-model:expanded-names="reportStore.openedCollapsible">
                    <NCollapseItem name="1">
                        <template #header>
                            <div class="flex w-full items-center justify-between gap-3 pr-4">
                                <ReportSectionHeader title="Планово" status="special-plan" />
                                <NButton v-if="isFillableMode && canEditReport" text type="primary" @click.stop="showPlanManualPatientModal = true">
                                    Добавить
                                </NButton>
                            </div>
                        </template>
                        <ReportSectionItem status="special-plan"
                                           :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('1')"
                                           :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                           is-draggable
                                           @item-dragged="handleItemDragged"
                        />
                    </NCollapseItem>
                    <NCollapseItem name="2">
                        <template #header>
                            <div class="flex w-full items-center justify-between gap-3 pr-4">
                                <ReportSectionHeader title="Экстренно" status="special-emergency" />
                                <NButton v-if="isFillableMode && canEditReport" text type="primary" @click.stop="showEmergencyManualPatientModal = true">
                                    Добавить
                                </NButton>
                            </div>
                        </template>
                        <ReportSectionItem status="special-emergency"
                                           :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('2')"
                                           :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                           is-draggable
                                           @item-dragged="handleItemDragged"
                        />
                    </NCollapseItem>
                    <NCollapseItem name="3" @dragenter="(e) => handleCollapseItemDragEnter(e, '3')">
                        <template #header>
                            <ReportSectionHeader title="Находятся на контроле" status="special-observation" />
                        </template>
                        <NFlex :size="12">
                            <ReportSectionItem status="special-observation"
                                               :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('3')"
                                               id="observation-table"
                                               @item-dragged="handleItemDragged"
                                               @item-dropped="handleItemDropped"
                                               is-removable
                                               is-draggable-drop
                            />
                            <NAlert v-if="isFillableMode" type="info" class="w-full">
                                Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение
                            </NAlert>
                        </NFlex>
                    </NCollapseItem>
                    <NCollapseItem name="5">
                        <template #header>
                            <ReportSectionHeader title="Выбывшие" status="special-outcome" />
                        </template>
                        <NTabs v-model:value="activeSpecialOutcomeTab" type="segment" animated>
                            <NTabPane name="discharged">
                                <template #tab>
                                    <ReportSectionHeader title="Выписанные" status="special-outcome-discharged" />
                                </template>
                                <ReportSectionItem status="special-outcome-discharged"
                                                   :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('5') && activeSpecialOutcomeTab === 'discharged'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                            <NTabPane name="deceased">
                                <template #tab>
                                    <ReportSectionHeader title="Умершие" status="special-outcome-deceased" />
                                </template>
                                <ReportSectionItem status="special-outcome-deceased"
                                                   :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('5') && activeSpecialOutcomeTab === 'deceased'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                            <NTabPane name="transferred">
                                <template #tab>
                                    <ReportSectionHeader title="Переведённые" status="special-outcome-transferred" />
                                </template>
                                <ReportSectionItem status="special-outcome-transferred"
                                                   :enabled="activeRootTab === 'special' && reportStore.openedCollapsible.includes('5') && activeSpecialOutcomeTab === 'transferred'"
                                                   @item-dragged="handleItemDragged"
                                                   @item-dropped="handleItemDropped"
                                />
                            </NTabPane>
                        </NTabs>
                    </NCollapseItem>
                </NCollapse>
            </NTabPane>
        </NTabs>

        <ManualPatientModal v-model:show="showPlanManualPatientModal" patient-kind="plan" />
        <ManualPatientModal v-model:show="showEmergencyManualPatientModal" patient-kind="emergency" />
    </NCard>
</template>

<style scoped>

</style>
