<script setup>
import { NFormItem, NCard, NScrollbar, NEl, NSpin } from 'naive-ui'
import {computed, ref, watch} from "vue";
const props = defineProps({
    header: {
        type: String,
        default: ''
    },
    headerIncludeBody: {
        type: Boolean,
        default: false
    },
    feedback: {
        type: String,
        default: ''
    },
    minH: {
        type: [String, Number],
        default: null
    },
    maxH: {
        type: [String, Number],
        default: null
    },
    noPadding: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const hasHeader = computed(() => props.header.trim().length > 0)
const hasHeaderInOutside = computed(() => hasHeader.value && !props.headerIncludeBody)
const hasFeedback = computed(() => props.feedback.trim().length > 0)
const hasMinH = computed(() => props.minH.trim().length > 0 || Number.isInteger(props.minH))
const hasMaxH = computed(() => props.maxH.trim().length > 0 || Number.isInteger(props.maxH))

const styles = ref([])

watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
    const sizeStyles = []

    if (minH === null) return
    if (minH.trim().length > 0) {
        sizeStyles.push(`min-height: ${minH};`)
    } else if (Number.isInteger(minH)) {
        sizeStyles.push(`min-height: ${minH}px;`)
    }

    if (maxH === null) return
    if (maxH.trim().length > 0) {
        sizeStyles.push(`max-height: ${maxH};`)
    } else if (Number.isInteger(maxH)) {
        sizeStyles.push(`max-height: ${maxH}px;`)
    }

    styles.value = styles.value.concat(sizeStyles)
}, {
    immediate: true
})
</script>

<template>
    <NFormItem :show-label="hasHeaderInOutside" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
        <NCard v-bind="$attrs" :class="noPadding ? 'no-padding h-full relative' : 'h-full relative'">
            <template v-if="!hasHeaderInOutside && header" #header>
                {{ header }}
            </template>
            <template #header-extra>
                <slot name="header-extra" />
            </template>
            <NScrollbar :style="styles">
                <slot />
            </NScrollbar>

            <div v-if="loading"
                 class="absolute inset-0 z-10" style="background-color: color-mix(in srgb, var(--n-color-popover) 20%, transparent)">
                <div class="flex flex-col justify-center items-center h-full">
                    <NSpin size="small" />
                </div>
            </div>
        </NCard>
    </NFormItem>
</template>

<style scoped>
.no-padding :deep(.n-card-content) {
    padding: 0 !important;
}
</style>
